如何使用 css 建立自定義滾動條
準備工作做好了，接下來進入本教程中有趣的部分。本節內容的第一部分會介紹一些滾動條樣式相關的 css 屬性。第二部分我們會實現 4種不同型別的滾動條，能為你之後製作自己的滾動條提供一些思路。
滾動條樣式相關的 css 屬性
很不幸，現在還沒有對這些 css 屬性的標準化跨瀏覽器支援。firefox 和一些基於 webkit 核心的瀏覽器（如 chrome、edge、safari）各自提供了不同的屬性。
本教程主要針對 webkit 核心的瀏覽器，因為它們提供了更多樣式屬性，不過我也會簡單介紹一下 firefox。
webkit 滾動條樣式屬性
::-webkit-scrollbar – 整個滾動條
::-webkit-scrollbar-track – 滾動條的滾動區域（軌道）
::-webkit-scrollbar-thumb – 滾動條的可拖拽部分（滑塊）
以下是可用但不常用的屬性：
::-webkit-scrollbar-button – 滾動條兩端的上/下（或左/右）按鈕
::-webkit-scrollbar-track-piece – 滾動條軌道未被滑塊覆蓋的部分
::-webkit-scrollbar-corner – 垂直滾動條和水平滾動條交匯的部分
firefox 滾動條樣式屬性
firefox中當前可用的兩個滾動條樣式屬性：
scrollbar-width – 控制滾動條的寬度，只有兩個可選項：auto 或 thin
scrollbar-color – 接收兩個顏色，依次指定滑塊和軌道的顏色
了解了自定義滾動條的樣式屬性，我們通過幾個例子將它們付諸實踐。
暗色主題滾動條
現在暗色主題的**非常流行。堅持使用預設的滾動條可能會惹惱使用者，因為它與整個**的暗色主題不搭。
用我們新學的知識建立乙個暗色主題的滾動條，它的邊框是圓形的（靈感來自 css tricks **）：
放到網頁最頂部的css中
html::-webkit-scrollbar最終效果在截圖中比較難看清，不過可以看到軌道是黑色的、滑塊是深灰色的。html::-webkit-scrollbar-track
html::-webkit-scrollbar-thumb
這個部分的重點是使用重複的線性漸變在滾動條軌道中建立圖案效果，這個方法也可以運用在滑塊上。
另外一點需要注意的是，你也可以為滑塊設定邊框樣式，利用邊框樣式可以建立許多有趣的效果。本例中，我把滑塊的背景顏色設為透明，這樣就可以在滾動的同時看到軌道中的圖案。
/*隱藏滾動條設定滾動條樣式*/這個例子用到了線性漸變，並使用了乙個小技巧：利用滑塊的陰影使得滾動條在頁面滾動時看起來像是在變換顏色，實際上是軌道的背景透過滑塊顯示了出來。
陰影遮蓋住了滑塊之外的所有軌道空間，又由於滑塊是透明的，所以軌道背景的漸變顏色透過它顯示出來。
CSS自定義滾動條樣式
ie是最早提供滾動條的樣式支援，好多年了，但是其它瀏覽器一直沒有支援，ie獨孤求敗了。這些樣式規則很簡單 scrollbar arrow color color 三角箭頭的顏色 scrollbar face color color 立體滾動條的顏色 包括箭頭部分的背景色 scrollbar 3dli...
CSS 自定義滾動條樣式
css 自定義滾動條樣式 針對 webkit 核心的遊覽器，使用下列偽類改變滾動條預設樣式。webkit scrollbar 滾動條整體部分 webkit scrollbar thumb 滾動條內滑塊 上下或左後移動 webkit scrollbar track 滾動條軌道 webkit scrol...
css 自定義滾動條樣式
總是記不住這幾個修改滾動條的偽類，抄過來記錄一下 你可以使用以下偽元素選擇器去修改各式webkit瀏覽器的滾動條樣式 webkit scrollbar 整個滾動條.webkit scrollbar button 滾動條上的按鈕 上下箭頭 webkit scrollbar thumb 滾動條上的滾動滑...