@click 改变div背景颜色_CSS改变浏览器默认滚动条样式

深碍√TFBOYSˉ_ 2023-01-07 10:22 223阅读 0赞

**前言**

最近总是看到某网站滚动条不是浏览器默认样式，而是自定义样式

比如下面动图中的滚动条，自定义滚动条样式和**hover**前后的效果

![fa6e2da91ae707f603144bd459dadb50.png][]

顿时来了兴致和有一个疑问，这是怎么实现的呢？

**解决**

![4eb8ba50894ff7c8e5f2149072335a15.png][]

**注：①：**经测试，目前只支持**webkit**内核的浏览器，比如，谷歌，**Safari**，**edge**，**360**安全和**360**极速浏览器的极速模式，火狐，**IE**，**opera**等不支持

**②：**如上设置后浏览器默认的滚动条样式会被修改，若不想样式作用于整个浏览器，比如只想改变一个弹窗中超出内容后滚动条的样式可以在前面加上类 **.element::-webkit-scrollbar**

**③：-webkit-scrollbar**属性设置的滚动条宽为纵向滚动条的宽度，横向滚动条的高度

--------------------

**Demo**

<html>
    
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                ::-webkit-scrollbar {
                    /*改变纵向滚动条宽度*/
                    width: 15px;
                }
     
                ::-webkit-scrollbar-track {
                    /*改变滚动条轨道颜色*/
                    border-radius: 10px;
                    background-color: #F0F0F0;
                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                }
     
                ::-webkit-scrollbar-thumb {
                    /*改变滚动条滑轨相关的样式*/
                    border-radius: 10px;
                    background-color: #ccc;
                }
                /* 移入鼠标效果 */
     
                ::-webkit-scrollbar-thumb:hover {
                    border-radius: 10px;
                    background-color: #A3A3A3;
                    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                }
     
                div {
                    font-size: 600px
                }
            </style>
        </head>
    
        <body>
            <div class="test1">666</div>
            <div class="test2">888</div>
            <div class="test3">999</div>
            <div class="container">
                <div class="test4">000</div>
            </div>
        </body>
    
    </html>

**参考原文：https://blog.csdn.net/qq\_36763293/article/details/82779922**

[fa6e2da91ae707f603144bd459dadb50.png]: /images/20221119/ca88074bbb75485f9f8d5ee69ecd7824.png
[4eb8ba50894ff7c8e5f2149072335a15.png]: /images/20221119/0fcd89d5efb14d8c999b0a7ba2689f01.png