一、認識滾動條

::-webkit-scrollbar	滾動條整體
::-webkit-scrollbar-thumb	滾動條滑塊
::-webkit-scrollbar-track	滾動條軌道
::-webkit-scrollbar-button	滾動條軌道兩端按鈕
::-webkit-scrollbar-track-piece	滾動條內層軌道
::-webkit-scrollbar-corner	滾動條交匯處
::-webkit-resizer	滾動條的交匯處用于通過拖動調整元素大小的小控件

---

二、自定義滾動條（css）

::-webkit-scrollbar {width: 15px;}::-webkit-scrollbar-thumb {background-color: lightsteelblue;}::-webkit-scrollbar-track {background-color: lightgreen;}::-webkit-scrollbar-thumb:horizontal {background-color: lightseagreen;}::-webkit-scrollbar-track:horizontal {background-color: lightsalmon;}::-webkit-scrollbar-corner {background-color: lightcoral;}

效果圖

---

三、滾動條可用偽類?

:horizontal	適用于水平方向上的滾動條?
:vertical	適用于垂直方向上的滾動條?
:decrement	適用于使區域向上或者向右移動的按鈕?
:increment	適用于使區域向下或者向左移動的按鈕?
:start	表示按鈕或軌道碎片是否放在滑塊的前面?
:end	表示按鈕或軌道碎片是否放在滑塊的后面
:double-button	判斷軌道結束的位置是否是一對按鈕
:single-button	判斷軌道結束的位置是否是一個按鈕
:no-button	表示軌道結束的位置沒有按鈕。
:corner-present	表示滾動條的角落是否存在
:window-inactive	適用于所有滾動條，表示包含滾動條的區域，焦點不在該窗口的時候

---

關鍵字：css、webkit、scroll、滾動條

總結

以上是生活随笔為你收集整理的自定义滚动条（css）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。