需求效果:滚动条能够自定义相关颜色、尺寸、背景等,如下:
而不是使用系统的默认滚动条,如下:
解决方案:
只需要给产生滚动条的标签加上一个css类即可。如:m-scroll
类的样式内容如下:
.m-scroll::-webkit-scrollbar {
width: 5px; /*宽对应竖滚动条的尺寸宽度*/
height: 5px; /*高对应横滚动条的尺寸高度*/
}
.m-scroll::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(53,235,251,1); /* 竖直滚动块的颜色 */
}
.m-scroll::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(0,0,0,0.2); /* 轨道的背景颜色 */
}