CSS——設置滾動條樣式

webkit滾動條樣式重置

一、scrollbar包含scrollbar buttons和一個track。track進一步細分爲track pieces和thumb。trace pieces爲thumb的上半部分和半下部分。
二、scrollbar corner爲橫向和豎向的交叉角區域
三、resize用來設置滾動條的交匯處上用於拖動調整元素大小的小控件

組成結構圖以下：

一旦發現滾動條的自定義樣式，瀏覽器的默認樣式設置將會失效，只使用在css定義的樣式。也就意味值不能單獨只設置scrollbar button或scrollbar track。

-webkit-scrollbar  /* 滾動條總體部分，重置時必需要設置 */
-webkit-scrollbar-button  /* 滾動條的軌道的兩端按鈕  */
-webkit-scrollbar-track /* 滾動條的軌道（包含thumb和trace-piece）*/
-webkit-scrollbar-track-piece /* 軌道中下方塊的上下(左右)部分*/
-webkit-scrollbar-thumb  /*滾動條裏面的小方塊*/
-webkit-scrollbar-corner /* 垂直和水平的交叉角 */
-webkit-resize // 滾動條的交匯處上用於拖動調整元素大小的小控件 */

能夠結合如下僞類進行設置（不一樣的操做系統瀏覽器滾動條可能不同，全部能夠根據下面僞類來設置）：

• :horizontal 水平方向的track、track-piect、thumb
• :vertica 垂直方向的track、track-piect、thumb
• :decrement 向上和向左按鈕的button、向上或向左的track-piece
• :increment 向下和向右按鈕的button、向下和向右的track-piece
• :start 適用於buttons和track pieces,對象（buttons 或 trace piece）是否放在滑塊的前面
• :end 適用於buttons和track pieces,對象（buttons 或 trace piece）是否放在滑塊的後面
• :double-button 適用於buttons和track pieces，軌道結束的位置是不是一對按鈕
• :single-button 適用於buttons和track pieces，軌道結束的位置是不是一個按鈕
• :no-button 適用於track pieces，軌道結束的位置沒有按鈕
• :corner-present 適用於全部scrollbar,滾動條的角落是否存在
• :window-inactive 適用於全部scrollbar,包含滾動條的區域，焦點不在該窗口的時候
• :enabled, :disabled, :hover , :active 這些僞類一樣適用

IE滾動條樣式重置

IE中只能修改滾動條顏色

scrollbar-arrow-color:#f2f2f3;  /*上下箭頭*/
scrollbar-track-color  /*底層背景色*/
scrollbar-face-color   /*滾動條前景色，對應thumb*/
scrollbar-shadow-color /*滾動條邊線色,thubm的border*/
scrollbar-highlight-color  /*滾動條總體顏色*/
scrollbar-base-color /* 滾動條基準顏色 */

參考資料

Styling Scrollbars | Webkit