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

最新推荐文章于 2023-08-01 22:53:51 发布

weixin_39654245

最新推荐文章于 2023-08-01 22:53:51 发布

阅读量82

点赞数

文章标签：滚动条样式 WebKit内核 CSS hover效果自定义滚动条

本文链接：https://blog.csdn.net/weixin_39654245/article/details/112741000

版权

前言

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

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

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

解决

注：①：经测试，目前只支持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

weixin_39654245

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫