css自定义滚动条

最新推荐文章于 2025-05-16 16:56:09 发布

转载最新推荐文章于 2025-05-16 16:56:09 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/calamus/p/8884276.html

本文介绍了一种使用CSS自定义浏览器滚动条样式的方案。通过设置.cl-scrollbar类的不同部分（滚动条整体、滚动条内小方块及轨道），可以实现个性化的滚动条样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器自带的滚动条样式已经不能满足审美需求了，需要自定义

.cl-scrollbar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.cl-scrollbar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #495060;
}

.cl-scrollbar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #EDEDED;
}