css自定義滾動條樣式
不同的瀏覽器自定義滾動條時用到的屬性不同，主要分為兩大類(主要討論現代瀏覽器，不包含IE)：webkit內核和Firefox。
webkit內核的瀏覽器
webkit內核的瀏覽器包括Chrome，Safari，Edge等，在這些瀏覽器中自定義滾動條樣式用到下面這些屬性：
-
::-webkit-scrollbar – 整個滾動條
-
::-webkit-scrollbar-track – 滑塊的軌道
-
::-webkit-scrollbar-thumb – 滑塊
-
::-webkit-scrollbar-button – 滾動條兩端的上/下按鈕
-
::-webkit-scrollbar-track-piece – 滑塊的軌道上沒有被滑塊覆蓋的部分
-
::-webkit-scrollbar-corner – 水平滾動條和垂直滾動條交匯的角
Firefox瀏覽器
在Firefox瀏覽器中自定義滾動條樣式用到以下屬性：
- scrollbar-color - 值分為兩部分，第一部分是滑塊顏色，第二部分是軌道背景顏色
- scrollbar-width - 水平滾動條的高度，垂直滾動條的寬度，值只能是 thin 或 auto
在webkit內核瀏覽器中展示的幾個例子
例1 黑色主題滾動條
html::-webkit-scrollbar {
width: 20px;
}
html::-webkit-scrollbar-track {
background-color: black;
}
html::-webkit-scrollbar-thumb {
background: #4e4e4e;
border-radius: 25px;
}
例2 簡單風格的滾動條
鼠標指針放在滾動條滑塊上時滑塊的顏色會加深，鼠標點擊滑塊拖動時滑塊顏色會再次加深。
html::-webkit-scrollbar {
width: 10px;
}
html::-webkit-scrollbar-track {
background: rgb(179, 177, 177);
border-radius: 10px;
}
html::-webkit-scrollbar-thumb {
background: rgb(136, 136, 136);
border-radius: 10px;
}
html::-webkit-scrollbar-thumb:hover {
background: rgb(100, 100, 100);
border-radius: 10px;
}
html::-webkit-scrollbar-thumb:active {
background: rgb(68, 68, 68);
border-radius: 10px;
}
例3 有圖案的滾動條
html::-webkit-scrollbar {
width: 20px;
}
html::-webkit-scrollbar-track {
background-image: repeating-linear-gradient(45deg, red 0, red 1px, transparent 0, transparent 50%);
background-size: 10px 10px;
}
html::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 5px;
border: 2px solid black;
box-shadow: inset 1px 1px 5px black ;
}
例4 漸變滾動條
當拖動滑塊時，滑塊的顏色會發生改變，就像添加了動畫一樣。
html::-webkit-scrollbar {
width: 20px;
}
html::-webkit-scrollbar-track {
background: linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);
}
html::-webkit-scrollbar-thumb {
background: transparent;
box-shadow: 0px 0px 0px 100vh black;
}
自定義滾動條樣式的局限性和替代方案
在自定義滾動條樣式時存在幾個問題：
- 缺少跨瀏覽器支持
- 缺少過渡和動畫支持
- 無法在手機上使用
一種替代方案是隱藏原來的滾動條，使用其他庫替代。用這種方式多少會影響應用的性能。
由於這些庫使用JavaScript模擬原生的滾動條行為，所以也可能存在潛在的問題。
下面是兩個很流行的制作滾動條的開源庫：
SimpleBar Library
使用simplebar庫可以很容易的創建自定義滾動條。但是他不支持作為網站的主滾動條，也不支持為<table>、<textarea>和<select>元素創建自定義滾動條。
這個庫主要是為即時聊天應用或者頁面內需要滾動的元素創建自定義滾動條。
Overlay Scrollbars Library
Overlay Scrollbars庫與SimpleBar庫很像，但是Overlay Scrollbars支持給<body>元素添加滾動條。這意味着你可以將這個庫應用於站點的主滾動條。
這個庫還具有跨瀏覽器支持以及可以在手機上使用的特性。