css如何修改滚动条样式

朱雀 2021-12-13 05:02 463阅读 0赞

默认滚动条样式如下：

![70][]

那如何修改呢？如下代码：

<div class="inner">  
        <div class="innerbox">  
        <p style="height:200px;">这是内容111</p>  
        <p style="height:400px;">这里是内容222</p>  
        <p>这里是内容333</p>  
    </div>

</div>

.inner\{  
            width: 265px;  
            height: 400px;  
            position: absolute;  
            top: 33px;  
            left: 13px;  
            overflow:hidden;  
        \}  
        .innerbox\{  
            overflow-x: hidden;  
            overflow-y: auto;  
            color: \#000;  
            font-size: .7rem;  
            font-family: "\\5FAE\\8F6F\\96C5\\9ED1",Helvetica,"黑体",Arial,Tahoma;  
            height: 100%;  
        \}  
        /\*滚动条样式\*/  
        .innerbox::-webkit-scrollbar \{  
            width: 4px;      
            /\*height: 4px;\*/  
        \}  
        .innerbox::-webkit-scrollbar-thumb \{  
            border-radius: 10px;  
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);  
            background: rgba(0,0,0,0.2);  
        \}  
        .innerbox::-webkit-scrollbar-track \{  
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);  
            border-radius: 0;  
            background: rgba(0,0,0,0.1);

效果显示如图：

![70 1][]

下面就讲解滚动条几个属性，主要有下面7个属性

1.  ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
2.  ::-webkit-scrollbar-button 滚动条两端的按钮
3.  ::-webkit-scrollbar-track  外层轨道
4.  ::-webkit-scrollbar-track-piece  内层滚动槽
5.  ::-webkit-scrollbar-thumb 滚动的滑块
6.  ::-webkit-scrollbar-corner 边角
7.  ::-webkit-resizer 定义右下角拖动块的样式

更多技术问题，可前往[http://sucai.gxyourui.cn/Home/Article/blog][http_sucai.gxyourui.cn_Home_Article_blog]

[70]: /images/20211210/61a30b34c94c41818e607d773c0223a6.png
[70 1]: /images/20211210/65a2d27b4e784b2eb09968da465d1912.png
[http_sucai.gxyourui.cn_Home_Article_blog]: http://sucai.gxyourui.cn/Home/Article/blog