【CSS】滾動條樣式的優化

前言

優化後的滾動條會提亮咱們的網站頁面。

例如： CSS-TRICKS這個網站若是採用的是瀏覽器默認的滾動條，不進行優化，頁面會顯得很不搭。

因此該網站的滾動條樣式優化以下：

html::-webkit-scrollbar {
    width: 30px;
    height: 30px;
}
html::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#e52e71));
    background: linear-gradient(180deg,#ff8a00,#e52e71);
    border-radius: 30px;
    box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
html::-webkit-scrollbar-track {
    background: linear-gradient(90deg,#201c29,#201c29 1px,#100e17 0,#100e17);
}
複製代碼

那麼::-webkit-scrollbar、::-webkit-scrollbar-thumb和::-webkit-scrollbar-track是什麼以及怎麼用請繼續往下閱讀。

webkit內核下

這些僞元素僅使用在支持webkit的瀏覽器上（如Chrome和Safari）。

滾動條僞元素	做用的位置
::-webkit-scrollbar	整個滾動條
::-webkit-scrollbar-button	滾動條上的按鈕 (上下箭頭)
::-webkit-scrollbar-thumb	滾動條上的滾動滑塊
::-webkit-scrollbar-track	滾動條軌道
::-webkit-scrollbar-track-piece	滾動條沒有滑塊的軌道部分
::-webkit-scrollbar-corner	當同時有垂直滾動條和水平滾動條時交匯的部分
::-webkit-resizer	某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕)

在圖上就能更清晰地呈現：

總結：這些僞元素支持Chrome Edge、Opera Safari、Android webview、Chrome for Android、Opera for Android、Safari on iOS和Samsung Internet,不支持Firefox、Internet Explorer和Firefox for Android。因此想要兼容其他瀏覽器，就得轉Trident（IE）內核下目錄。

固然webkit提供的不止這些，還有不少僞類，更豐富滾動條樣式：

滾動條僞類	做用的位置
:horizontal	適用於任何水平方向上的滾動條
:vertical	適用於任何垂直方向的滾動條
:decrement	適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片，例如可使區域向上或者向右移動的區域和按鈕
:increment	適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片，例如可使區域向下或者向左移動的區域和按鈕
:start	適用於按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的前面
:end	適用於按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的後面
:double-button	適用於按鈕和軌道碎片。判斷軌道結束的位置是不是一對按鈕。也就是軌道碎片緊挨着一對在一塊兒的按鈕。
:single-button	適用於按鈕和軌道碎片。判斷軌道結束的位置是不是一個按鈕。也就是軌道碎片緊挨着一個單獨的按鈕。
:no-button	表示軌道結束的位置沒有按鈕。
:corner-present	表示滾動條的角落是否存在。
:window-inactive	適用於全部滾動條，表示包含滾動條的區域，焦點不在該窗口的時候。

根據這些知識，能夠得出CSS-TRICKS這個網站的滾動條樣式：

1. 水平滾動條高30px,垂直滾動條寬30px
2. 滾動條上的滾動滑塊背景色是從上到下#ed4f32漸變到#f5f5f5，邊框圓角是30px，內部陰影是x方向上和y方向上平移2px和-2px,陰影顏色分別是hsla(0,0%,100%,.25)和rgba(0,0,0,.25)
3. 滾動條軌道背景色漸變

寫炫酷的滾動條樣式是要積累的。

不會寫box-shoadow可使用Box-shadow_generator生成器

僞元素+僞類更能精準定位達到意想不到的效果。

做用在滾動條的上半邊

html::-webkit-scrollbar-track-piece:vertical:start {
    background: rgb(225, 126, 16);
}
複製代碼

滾動條的上半邊就是背景色是rgb(225, 126, 16)：

是否是很像車開過，留下的車痕

焦點不在滑塊上

html::-webkit-scrollbar-thumb:window-inactive {
    background: rgb(160, 87, 221);
}
複製代碼

鼠標在滾動條遞減的按鈕上

.div-2::-webkit-scrollbar-button:decrement:hover {
    background: #fff;
}
複製代碼

各僞元素的顏色區分圖

紅色 ::-webkit-scrollbar

橙色 ::-webkit-scrollbar-button

黃色 ::-webkit-scrollbar-thumb

綠色 ::-webkit-scrollbar-track

青色 ::-webkit-scrollbar-track-piece

藍色 ::-webkit-scrollbar-corner
複製代碼

textarea下的-webkit-resizer

紫色 ::-webkit-resizer 
複製代碼

默認瀏覽器

自定義滾動條案例

簡約風格的

膠囊風格的

彩條風格的

兩色風格的

圖片按鈕的

Trident（IE）內核下

IE5+上的滾動條屬性	其做用
scrollbar-3dlight-color	設置對象滾動條3d亮色陰影邊框(threedlightshadow)的外觀顏色。
scrollbar-darkshadow-color	設置對象滾動條3d暗色陰影邊框(threeddarkshadow)的外觀顏色。
scrollbar-highlight-color	設置對象滾動條3d高亮邊框(threedhighlight)的外觀顏色。
scrollbar-shadow-color	設置對象滾動條3d陰影邊框(threedshadow)的外觀顏色。
scrollbar-arrow-color	設置對象滾動條方向箭頭的顏色。當滾動條出現但不可用時，此屬性失效。
scrollbar-face-color	設置對象滾動條3D表面的(threedface)的外觀顏色。
scrollbar-track-color	設置對象滾動條拖動區域的外觀顏色。
scrollbar-base-color	設置對象滾動條基準顏色，其它界面顏色將據此自動調整。
scrollbar-color	該CSS屬性設置滾動條軌道和按鈕的顏色

在圖上就能更清晰地呈現：

都是color，因此在IE上只能改顏色

經測試IE7以上，scrollbar-3dlight-color:、scrollbar-color和scrollbar-darkshadow-color就起不到做用。

因此，只要有耐心，快去實現頭圖的滾動條吧。

全部demo的預覽地址

參考文獻

::-webkit-scrollbar

scrollbar-color

一個學習編程技術的公衆號。天天推送高質量的優秀博文、開源項目、實用工具、面試技巧、編程學習資源等等。目標是作到我的技術與公衆號一塊兒成長。歡迎你們關注，一塊兒進步，走向全棧大佬的修煉之路