改变滚动条样式

article/2025/11/7 4:24:20

在我们开发网页项目中往往会遇到滚动条，然而滚动条原本的样式太丑了，所以要改变滚动条的样式，让滚动条和我们开发的项目更加的美观更加的好看；

案例：

<div style="width: 200px; height: 200px;overflow: auto"><div style="width: 300px;height: 300px;background-color:#FFFFFF "></div></div>

先让盒子出现滚动条；

想要改变滚动条的样式，只要写滚动条的css样式；

下面的是该页面的所有的滚动条都是这个样式，

::-webkit-scrollbar {/*滚动条整体样式*/width: 10px; /*高宽分别对应横竖滚动条的尺寸*/height: 5px;scrollbar-arrow-color: red;}::-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);scrollbar-arrow-color: red;}::-webkit-scrollbar-track { /*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);border-radius: 0;background: rgba(0,0,0,0);}

效果图：

如果是想要改变某一个盒子的滚动条样式，那么只要在样式前加上类名或id名；

代码：

<style>	.gdt::-webkit-scrollbar {/*滚动条整体样式*/width: 10px; /*高宽分别对应横竖滚动条的尺寸*/height: 5px;scrollbar-arrow-color: red;}.gdt::-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);scrollbar-arrow-color: red;}.gdt::-webkit-scrollbar-track { /*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);border-radius: 0;background: rgba(0,0,0,0);}
</style><body><div style="width: 200px; height: 200px;overflow: auto"><div style="width: 300px;height: 300px;background-color:#FFFFFF "></div></div><div class="gdt" style="width: 200px; height: 200px;overflow: auto"><div style="width: 300px;height: 300px;background-color:#FFFFFF "></div></div>
</body>

效果图：