滚动条

痛定思痛。 2022-10-22 09:27 126阅读 0赞

# CSS3自定义滚动条样式 -webkit-scrollbar(overflow-x:scroll/auto overflow-y:scroll/auto) #

内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。

首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。

滚动条的css样式主要有三部分组成：

1、.test::-webkit-scrollbar   定义了滚动条整体的样式；

2、.test::-webkit-scrollbar-thumb  滑块部分；

3、.test::-webkit-scrollbar-thumb  轨道部分；

下面以overflow-y:auto;为例（overflow-x:auto同）

html代码：

<div class="test test-1">  
        <div class="scrollbar"></div>  
</div>  
css代码：

.test\{  
    width: 50px;  
    height: 200px;  
    overflow: auto;  
    float: left;  
    margin: 5px;  
    border: none;  
\}  
.scrollbar\{  
    width: 30px;  
    height: 300px;  
    margin: 0 auto;  
   
\}  
.test-1::-webkit-scrollbar \{/\*滚动条整体样式\*/  
        width: 10px;     /\*高宽分别对应横竖滚动条的尺寸\*/  
        height: 1px;  
    \}  
.test-1::-webkit-scrollbar-thumb \{/\*滚动条里面小方块\*/  
        border-radius: 10px;  
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);  
        background: \#535353;  
    \}  
.test-1::-webkit-scrollbar-track \{/\*滚动条里面轨道\*/  
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);  
        border-radius: 10px;  
        background: \#EDEDED;  
    \}  
效果如下：

以上就可以做出自己喜欢的滚动条了；

如果文档中会有多个滚动条出现，而且希望所有的滚动条样式是一样的，那么伪元素前面不需要加上class、id、标签名等之类的任何东西。  
————————————————  
版权声明：本文为CSDN博主「Anna·」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/weixin\_42220533/article/details/85317124