div自定义滚动条样式

最新推荐文章于 2024-05-18 22:06:39 发布

哦呐嘿！！

最新推荐文章于 2024-05-18 22:06:39 发布

阅读量390

点赞数

分类专栏： element

本文链接：https://blog.csdn.net/weixin_46272971/article/details/117598079

版权

CSS 滚动条样式自定义美化网页设计

关键词由CSDN通过智能技术生成

element 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原生滚动条样式如下
在这里插入图片描述
那么如何改变原生div的滚动条样式呢

代码如下：
拿到父类的div后

 	.visit-r::-webkit-scrollbar-track{
        background: #fff;
        border-radius:2px;
        /* 滚动条背景样式   可能不理解  但你可以试试调试一下呀 */
    }
    .visit-r::-webkit-scrollbar-thumb{
        background: #aaa;
        border-radius:6px;
            /* 滚动条样式   可能不理解  但你可以试试调试一下呀 */
    }
    .visit-r::-webkit-scrollbar-thumb:hover{
        background: #747474;
            /* 鼠标放上滚动条样式   可能不理解  但你可以试试调试一下呀 */
    }
    .visit-r::-webkit-scrollbar-corner{
        background: #f6f6f6;
    }