[TOC] #### 1. overflow 屬性介紹 --- css 中的 overflow 屬性用于控制內容溢出元素框時的顯示方式。 當元素框中的內容溢出時，無非就是兩種情況: `溢出部分隱藏`、`溢出部分通過滾動條查看` #### 2. overflow 屬性的值 --- | 值 | 描述 | | ------------ | ------------ | | visible | 默認值。內容不會被修剪，溢出部分會呈現在元素框之外 | | hidden | 內容被修剪，溢出部分不可見 | | scroll | 內容被修剪，無論是否溢出滾動條都會占據空間 | | auto | 當內容溢出時會被修剪且出現滾動條，沒有溢出時不顯示滾動條 | #### 3. 自定義 overflow 的滾動條 --- 以前不知道 overflow 的滾動條樣式是可以修改的，最近做的一個官網項目中前端提供的靜態模板自定義了滾動條樣式，才得知還有這么個東西，在此記錄一下自定義滾動條的寫法，這樣可以更好的理解用法，雖然下次使用還要來這里看 **首先，先來做一個有滾動條的容器** ```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 中滾動條的默認樣式:**  可以使用以下偽元素選擇器去修改各式 webkit 瀏覽器的滾動條樣式 | 選擇器 | 描述 | | ------------ | ------------ | | ::-webkit-scrollbar | 整個滾動條 | | ::-webkit-scrollbar-corner | 當同時有垂直滾動條和水平滾動條時交匯的部分 | | ::-webkit-scrollbar-thumb | 滾動條上的滾動滑塊 | | ::-webkit-scrollbar-track | 滾動條軌道 | **自定義滾動條樣式代碼示例: ** ```css /* 整個滾動條 */ .container::-webkit-scrollbar { width: 4px; height: 7px; } /* 當同時有垂直滾動條和水平滾動條時交匯的部分 */ .container::-webkit-scrollbar-corner { background: #b9b9b9; } /* 滾動條上的滾動滑塊 */ .container::-webkit-scrollbar-thumb { background: #E1660E; border-radius: 10px; } /* 滾動條軌道 */ .container::-webkit-scrollbar-track { background: #b9b9b9; border-radius: 2px; } ```