参考链接:https://blog.csdn.net/zh_rey/article/details/72473284
https://blog.csdn.net/messicr7/article/details/70211820
1.css样式
<style>
.box {
width: 300px;
height: 200px;
overflow: scroll;
}
/*定义滚动条宽高 背景色*/
.box::-webkit-scrollbar {
width: 17px;
height: 17px;
background-color: #181e26;
}
/*定义滚动条轨道 内阴影+圆角*/
.box::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: #fff;
}
/*定义滑块 内阴影+圆角*/
.box::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background: url(scroll.png) no-repeat center center;
background-color: #313f51;
}
.box::-webkit-scrollbar-thumb:hover {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #313f51;
}
</style>
2.dom元素
<div class="box">
喜欢温文淡雅的语句,喜欢浓香怡人的杯茗,喜欢安然恬静的微笑,喜欢杨柳拂面的春风,喜欢天真烂漫的童趣,喜欢漫无边际的遐思,喜欢不急不迫的行走,喜欢海阔天高的旅行,喜欢浅尝辄止的爱情,喜欢清淡如水的友情,喜欢赏心悦目的生活,喜欢美轮美奂的人生。 喜欢温文淡雅的语句,喜欢浓香怡人的杯茗,喜欢安然恬静的微笑,喜欢杨柳拂面的春风,喜欢天真烂漫的童趣,喜欢漫无边际的遐思,喜欢不急不迫的行走,喜欢海阔天高的旅行,喜欢浅尝辄止的爱情,喜欢清淡如水的友情,喜欢赏心悦目的生活,喜欢美轮美奂的人生。
</div>