CSS3捲軸-webkit-scrollbar，css3

CSS3捲軸-webkit-scrollbar，css3

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