CSS3如何使用webkit-scrollbar屬性自訂捲軸樣式的執行個體

CSS3自訂捲軸樣式 -webkit-scrollbar

有時候覺得瀏覽器內建的原始捲軸不是很美觀，那webkit瀏覽器是如何自訂捲軸的呢？

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;}

自訂捲軸：