[TOC] #### 1. overflow 屬性介紹 --- css 中的 overflow 屬性用于控制內(nèi)容溢出元素框時(shí)的顯示方式。 當(dāng)元素框中的內(nèi)容溢出時(shí)，無(wú)非就是兩種情況: `溢出部分隱藏`、`溢出部分通過(guò)滾動(dòng)條查看` #### 2. overflow 屬性的值 --- | 值 | 描述 | | ------------ | ------------ | | visible | 默認(rèn)值。內(nèi)容不會(huì)被修剪，溢出部分會(huì)呈現(xiàn)在元素框之外 | | hidden | 內(nèi)容被修剪，溢出部分不可見(jiàn) | | scroll | 內(nèi)容被修剪，無(wú)論是否溢出滾動(dòng)條都會(huì)占據(jù)空間 | | auto | 當(dāng)內(nèi)容溢出時(shí)會(huì)被修剪且出現(xiàn)滾動(dòng)條，沒(méi)有溢出時(shí)不顯示滾動(dòng)條 | #### 3. 自定義 overflow 的滾動(dòng)條 --- 以前不知道 overflow 的滾動(dòng)條樣式是可以修改的，最近做的一個(gè)官網(wǎng)項(xiàng)目中前端提供的靜態(tài)模板自定義了滾動(dòng)條樣式，才得知還有這么個(gè)東西，在此記錄一下自定義滾動(dòng)條的寫(xiě)法，這樣可以更好的理解用法，雖然下次使用還要來(lái)這里看 **首先，先來(lái)做一個(gè)有滾動(dòng)條的容器** ```html <style> .container { width: 260px; height: 100px; background: lightblue; display: flex; overflow-x: scroll; margin: 20px; } .item { width: 260px; height: 100px; line-height: 100px; flex-shrink: 0; text-align: center; } .item:nth-child(odd) { background: lightcoral; } .item:nth-child(even) { background: lightgreen; } </style> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> ``` **macOS 中滾動(dòng)條的默認(rèn)樣式:**  可以使用以下偽元素選擇器去修改各式 webkit 瀏覽器的滾動(dòng)條樣式 | 選擇器 | 描述 | | ------------ | ------------ | | ::-webkit-scrollbar | 整個(gè)滾動(dòng)條 | | ::-webkit-scrollbar-corner | 當(dāng)同時(shí)有垂直滾動(dòng)條和水平滾動(dòng)條時(shí)交匯的部分 | | ::-webkit-scrollbar-thumb | 滾動(dòng)條上的滾動(dòng)滑塊 | | ::-webkit-scrollbar-track | 滾動(dòng)條軌道 | **自定義滾動(dòng)條樣式代碼示例: ** ```css /* 整個(gè)滾動(dòng)條 */ .container::-webkit-scrollbar { width: 4px; height: 7px; } /* 當(dāng)同時(shí)有垂直滾動(dòng)條和水平滾動(dòng)條時(shí)交匯的部分 */ .container::-webkit-scrollbar-corner { background: #b9b9b9; } /* 滾動(dòng)條上的滾動(dòng)滑塊 */ .container::-webkit-scrollbar-thumb { background: #E1660E; border-radius: 10px; } /* 滾動(dòng)條軌道 */ .container::-webkit-scrollbar-track { background: #b9b9b9; border-radius: 2px; } ```