作者:心叶
时间: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{
/*样式代码*/
}