滚动条样式修改快速查阅

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滚动条样式修改快速查阅相关的知识,希望对你有一定的参考价值。

作者:心叶
时间: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{

    /*样式代码*/

}

以上是关于滚动条样式修改快速查阅的主要内容,如果未能解决你的问题,请参考以下文章

修改浏览器滚动条样式

css 修改滚动条样式(附上element-ui框架的表格滚动条样式修改)

css代码怎样改变火狐浏览器中滚动条样式

css代码怎样改变火狐浏览器中滚动条样式

设置滚动条样式 可以通过如下步骤

如何设置滚动条的样式?