CSS3自定義滾動條樣式 -webkit-scrollbar

 

滾動條的css樣式主要有三部分組成：

　　1、::-webkit-scrollbar   定義了滾動條整體的樣式；

     2、::-webkit-scrollbar-thumb  滑塊部分；

　  3、::-webkit-scrollbar-thumb  軌道部分；

下面以overflow-y:auto;爲例（overflow-x:auto同）

html代碼：

css代碼：
效果如下如：

如果要改變滾動條的寬度：在::-webkit-scrollbar中改變即可；如果要改變滾動條滑塊的圓角，在::-webkit-scrollbar-thumb 中改變；如果要改軌道的圓角在::-webkit-scrollbar-track中改變；

 

此外，滾動條的滑塊不僅可以填充顏色還可以填充圖片如下：

css代碼：

html代碼：

　效果如下：

以上就可以做出自己喜歡的滾動條了；

如果文檔中會有多個滾動條出現，而且希望所有的滾動條樣式是一樣的，那麼僞元素前面不需要加上class、id、標籤名等之類的任何東西。