-webkit-scrollbar 滾動條樣式設定

大家有沒有覺得浏覽器自帶的原始滾動條很不美觀，同時也有看到很多網站的自定義滾動條很酷炫，很高端，就連chrome32.0之後都抛棄了原始的滾動條，明顯好看多了，那麼浏覽器如何自定義滾動條呢？

分割線為敬

首先：

談談相容性：webkit支援擁有overflow屬性的區域，清單框，下拉菜單，textarea等滾動條自定義樣式，是以用處還是很大的，當然相容所有浏覽器滾動條的樣式目前還是不存在的

執行個體：經典的demo

于是好奇心查了一下相容性：廢話不多說看圖

這裡是滾動條的一些屬性

• ::-webkit-scrollbar 滾動條整體部分
• ::-webkit-scrollbar-thumb 滾動條裡面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水準滾動條）
• ::-webkit-scrollbar-track 滾動條的軌道（裡面裝有Thumb）
• ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點選微調小方塊的位置。
• ::-webkit-scrollbar-track-piece 内層軌道，滾動條中間部分（除去）
• ::-webkit-scrollbar-corner 邊角，即兩個滾動條的交彙處
• ::-webkit-resizer 兩個滾動條的交彙處上用于通過拖動調整元素大小的小控件

直接上demo

/*定義滾動條高寬及背景 高寬分别對應橫豎滾動條的尺寸*/  
::-webkit-scrollbar  
{  
    width: 16px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  

/*定義滾動條軌道 内陰影+圓角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  

/*定義滑塊 内陰影+圓角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}             

好奇的小夥伴可以，打開你喜歡的編輯器測試一下，最好在chrome浏覽器下測試，之後再去别的浏覽器下看看效果，你就知道chrome的強大，毒瘤IE的坑爹。

詳細：定義滾動條就是利用了僞元素與僞類

僞類：：link、:hover、:visited、:active、:focus等等一些基于目前元素處于的狀态。

僞元素：：first-line、：before、:after等等一些對元素特定内容的操作。

webkit中可以吧滾動條當做一個頁面元素來定義，在結合CSS3的屬性，來進行修飾。