更改浏览器滚动条样式

最新推荐文章于 2024-03-27 10:30:00 发布

腻味zya

最新推荐文章于 2024-03-27 10:30:00 发布

阅读量244

点赞数 2

分类专栏：随心记录文章标签： css html5

本文链接：https://blog.csdn.net/ZengYian/article/details/115184354

版权

随心记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近想换下项目中滚动条的样式，让滚动条更符合整体页面的风格，于是自己调了一个，效果如下：

直接上代码：

       /*滚动条大小*/       
       ::-webkit-scrollbar {
           width: 12px;
           height:12px;
       }
       /*滚动区域背景*/
       ::-webkit-scrollbar-track-piece{
           -webkit-border-radius:3px;
           -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
           border-radius: 0;
           background-color: #f5f5f5;
       }
       /*竖向滚动条*/
       ::-webkit-scrollbar-thumb:vertical{
           height:5px;
           background-color: #0fd5ff;
           -webkit-border-radius:3px;
           -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
       }