滚动条样式修改快速查阅

做者：心叶
时间：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{

    /*样式代码*/

}