webkit現在支持擁有overflow屬性的區域，列表框，下拉菜單，textarea的滾動條自定義樣式。
如果你想跳過介紹，直接看demo的話，請點擊demo
滾動條是一個偽元素，可以自定義樣式。這個偽類可以將webkit自身的滾動條渲染關閉，只按照用戶自定義的css信息進行渲染。比如：
::-webkit-scrollbar {
width: 13px;
height: 13px;
}
width和height屬性分別表示縱向滾動條的寬度和橫向滾動條的高。也可以指定為%百分比，在在這種情況下就代表了，滾動條占整個視窗的百分比，如：
::-webkit-scrollbar {
width: 50%;
}
滾動條包括：滾動按鈕和一個軌道。軌道本身有進一步氛圍軌道碎片（track pieces）和一個滑塊。軌道碎片值滑塊上方和下面的區域。滾動條的角合適被設置為各種風格，比如可以調整文本區域的大小。
下面是關於滾動條的所有偽元素：
::-webkit-scrollbar{/*1*/}
::-webkit-scrollbar-button{/*2*/}
::-webkit-scrollbar-track{/*3*/}
::-webkit-scrollbar-track-piece{/*4*/}
::-webkit-scrollbar-thumb{/*5*/}
::-webkit-scrollbar-corner{/*6*/}
::-webkit-resizer{/*7*/}
任何對象都可以設置：邊框、陰影、背景圖片等等，創建的滾動條任然會按照操作系統本身的設置來完成其交互的行為。下面的偽類可以應用到上面的偽元素中。
:horizontal(horizontal偽類適用於任何水平方向上的滾動條)
:vertical(vertical偽類適用於任何垂直方向的滾動條)
:decrement(decrement偽類適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片，例如可以使區域向上或者向右移動的區域和按鈕)
:increment(increment偽類適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕)
:start(start偽類適用於按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的前面)
:end(end偽類適用於按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的后面)
:double-button(double-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨着一對在一起的按鈕。)
:single-button(single-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。也就是軌道碎片緊挨着一個單獨的按鈕。)
:no-button(no-button偽類表示軌道結束的位置沒有按鈕。)
:corner-present(corner-present偽類表示滾動條的角落是否存在。)
:window-inactive(適用於所有滾動條，表示包含滾動條的區域，焦點不在該窗口的時候。)
::-webkit-scrollbar-track-piece:start {
/*滾動條上半邊或左半邊*/
}
::-webkit-scrollbar-thumb:window-inactive {
/*當焦點不在當前區域滑塊的狀態*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*當鼠標在水平滾動條下面的按鈕上的狀態*/
}
更多內容請參考http://my.oschina.net/hehongbo/blog/205128