CSS自定义滚动条

最新推荐文章于 2024-07-26 15:10:54 发布

乐辞

最新推荐文章于 2024-07-26 15:10:54 发布

阅读量692

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45503196/article/details/125992825

版权

html内容

<div class="testScrollbar">
测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条
</div>

默认样式

 .testScrollbar {
    height: 300px;
    width: 200px;
    background-color: #ccc;
    padding: 5px;
    overflow: auto;
 }

默认滚动条效果
在这里插入图片描述
自定义滚动条 css

/*滚动条整体样式,高宽分别对应横竖滚动条的尺寸*/
 .testScrollbar::-webkit-scrollbar {
   width: 5px;
   height: 2px;
   border-radius: 5px;
   background-color: #eee;
 }

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

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