自定义浏览器滚动条的样式，打造属于你的滚动条风格

最新推荐文章于 2023-11-16 15:28:11 发布

tqtiwvfdn

最新推荐文章于 2023-11-16 15:28:11 发布

阅读量577

点赞数

分类专栏： Web 前端 CSS

前端同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Web

19 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

一方面是懒得复制粘贴，另外一方面也是尊重别人的劳动，直接放地址：

http://www.lyblog.net/2013/314.html#title-2

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
    -webkit-transition:background-color linear 1s;
}
::-webkit-scrollbar:hover,
::-webkit-scrollbar:active{
    background-color:rgba(204,204,204,.5);
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.1);
    border-radius: 1em;
    -webkit-transition:background-color linear 1s;
}
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active {
        background-color: rgba(0,0,0,.5);
    }

或者直接用mCustomer插件