滚动条,每个前端工程师都会遇到的一个组件,当你固定好盒子的高度设置了overflow-y:scroll或overflow-x:scroll后,只要内容超过了宽高就能够看的到它,就像下图一样:
修改前的默认样式
因为觉得自带的滚动条显得有些“笨笨”的,所以在查阅资料后,我找到了通过CSS修改滚动条样式的方法,分享给可能也想要修改的大家。
/* 定义滚动条轨道 */
::-webkit-scrollbar {
width: 1px; /* 设置滚动条宽度 */
}
/* 定义滚动条的轨道背景 */
::-webkit-scrollbar-track {
background: transparent; /* 设置滚动条轨道背景颜色 */
}
/* 定义滚动条滑块 */
::-webkit-scrollbar-thumb {
background: #dcdcdc; /* 设置滚动条滑块颜色 */
}
/* 定义滚动条滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
background: #dcdcdc; /* 设置滚动条滑块悬停时的颜色 */
}
CSS代码
![image.png](https://i-blog.csdnimg.cn/blog_migrate/10a8cf320b2277cf1a7c2ab29bd83a0d.png)
按上述CSS修改后的样式
如果有想要修改的部分,按照这四个选择器写入特定的样式就能够满足要求了,快去试试吧。
![告辞](https://i-blog.csdnimg.cn/blog_migrate/48e768b90c77ca3e2fdc549a9c49a34d.png)