轉載:https://segmentfault.com/a/1190000012800450?utm_source=tag-newest
author:specialCoder
一 前言
在CSS 中，如果我們在塊級容器上設置了屬性:
overflow:scroll /* x y 方向都會*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當塊級內容區域超出塊級元素范圍的時候，就會以滾動條的形式展示，你可以滾動里面的內容，里面的內容不會超出塊級區域范圍。
有時候我們需要自定義滾動條的樣式，比如一開始就它顯示，比如想改變滾動條的顏色，設置軌道的樣式等，那么這篇文章就是為你准備的。
二 正文
1.認識滾動條
設置scrollbar的為CSS偽元素:
::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-webkit-scrollbar-thumb { /* 5 */ } ::-webkit-scrollbar-corner { /* 6 */ } ::-webkit-resizer { /* 7 */ }屬性介紹：
::-webkit-scrollbar //滾動條整體部分 ::-webkit-scrollbar-button //滾動條兩端的按鈕 ::-webkit-scrollbar-track // 外層軌道 ::-webkit-scrollbar-track-piece //內層軌道，滾動條中間部分（除去） ::-webkit-scrollbar-thumb //滾動條里面可以拖動的那個 ::-webkit-scrollbar-corner //邊角 ::-webkit-resizer ///定義右下角拖動塊的樣式2.設置樣式
demo
進入頁面，打開控制台工具，選中其中一個樣式，就能看到該樣式的CSS源碼。
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/ ::-webkit-scrollbar { width:16px; height:16px; background-color:#F5F5F5; } /*定義滾動條軌道 內陰影+圓角*/ ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); border-radius:10px; background-color:#F5F5F5; } /*定義滑塊 內陰影+圓角*/ ::-webkit-scrollbar-thumb { border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); background-color:#555; }
任何對象都可以設置：邊框、陰影、背景圖片等等，創建的滾動條任然會按照操作系統本身的設置來完成其交互的行為。下面的偽類可以應用到上面的偽元素中。
:horizontal//適用於任何水平方向上的滾動條 :vertical//適用於任何垂直方向的滾動條 :decrement//適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片，例如可以使區域向上或者向右移動的區域和按鈕 :increment//適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕 :start//適用於按鈕和軌道碎片。表示對象（按鈕軌道碎片）是否放在滑塊的前面 :end //適用於按鈕和軌道碎片。表示對象（按鈕軌道碎片）是否放在滑塊的后面 :double-button//適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨着一對在一起的按鈕。 :single-button//適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。也就是軌道碎片緊挨着一個單獨的按鈕。 :no-button//表示軌道結束的位置沒有按鈕。 :corner-present//表示滾動條的角落是否存在。 :window-inactive//適用於所有滾動條，表示包含滾動條的區域，焦點不在該窗口的時候。用法舉例：
::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ } ::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }3.IE瀏覽器
兼容IE的參考鏈接：https://www.cnblogs.com/koley...
三 后記
Chrome能很好的支持自定義滾動條，其它的瀏覽器在不同程度上支持自定義滾動條樣式。