改变滚动条样式
作者：互联网
在我们开发网页项目中往往会遇到滚动条，然而滚动条原本的样式太丑了，所以要改变滚动条的样式，让滚动条和我们开发的项目更加的美观更加的好看；
案例：
<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>效果图：
标签：rgba,样式,滚动条,改变,scrollbar,5px,webkit 来源： https://blog.csdn.net/qq_57767445/article/details/123607328