滾動條樣式修改快速查閱

做者：心葉
時間：2018-05-26 21:50

-webkit-scrollbar

1.總體

::-webkit-scrollbar{

    /*樣式代碼*/
    
}

2.按鈕

滾動條按鈕會稍微麻煩點，首先提供下面的選擇器能夠選中按鈕：

::-webkit-scrollbar-button{

    /*樣式代碼*/
    
}

然而，按鈕其實一共有八個，能夠借組下面的六個組合來進行更準確的選擇，他們方即是：

2.1 :vertical和:horizontal方便表示垂直仍是水平按鈕

2.2 :start和:end方便表示是開始位置的仍是結束位置的按鈕

2.3 :decrement和:increment方便表示點擊是觸發減少仍是增長的按鈕

舉例子，好比如今要選擇垂直方向，在開始位置，點擊上滑的滾動條樣式，設置爲紅色，代碼以下：

::-webkit-scrollbar-button:vertical:start:decrement {

    background-color: red;
    
}

通常設置display: block;

3.滑塊

::-webkit-scrollbar-thumb{

    /*樣式代碼*/
    
}

固然，你能夠提供:horizontal和:vertical來進行更準確的選擇

4.軌道

::-webkit-scrollbar-track {

     /*樣式代碼*/

}

固然，你能夠提供:horizontal和:vertical來進行更準確的選擇

5.邊角

也就是兩個滾動條的交匯處

::-webkit-scrollbar-corner{

    /*樣式代碼*/

}