CSS3自訂捲軸樣式 -webkit-scrollbar (一)

標籤：

Webkit支援擁有overflow屬性的地區，列表框，下拉式功能表，textarea的捲軸自訂樣式。當然，相容所有瀏覽器的捲軸樣式目前是不存在的。

捲軸的組成：

 

 ::-webkit-scrollbar         捲軸整體部分
 ::-webkit-scrollbar-thumb             捲軸裡面的小方塊，能上下左右移動（取決於是垂直捲軸還是水平捲軸）
 ::-webkit-scrollbar-track      捲軸的軌道（裡面裝有thumb）
 ::-webkit-scrollbar-button      捲軸軌道兩端的按鈕，允許通過點擊微調小方塊的位置
 ::-webkit-scrollbar-track-piece    內層軌道，捲軸中間部分（除去）
 ::-webkit-scrollbar-corner     邊角，及兩個捲軸的交匯處
 ::-webkit-resizer       兩個捲軸的交匯處上用於通過拖動調整元素大小的小控制項

 

自訂捲軸簡單版：

 

/*定義捲軸寬高及背景，寬高分別對應橫豎捲軸的尺寸*/.scrollbar::-webkit-scrollbar{    width: 16px;    height: 16px;    background-color: #f5f5f5;}/*定義捲軸的軌道，內陰影及圓角*/.scrollbar::-webkit-scrollbar-track{    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    border-radius: 10px;    background-color: #f5f5f5;}/*定義滑塊，內陰影及圓角*/.scrollbar::-webkit-scrollbar-thumb{    /*width: 10px;*/    height: 20px;    border-radius: 10px;    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    background-color: #555;}

 

CSS3自訂捲軸樣式 -webkit-scrollbar (一)