css[自定义标签滚动条样式]

需求效果:滚动条能够自定义相关颜色、尺寸、背景等,如下:

css[自定义标签滚动条样式]_第1张图片
而不是使用系统的默认滚动条,如下:
css[自定义标签滚动条样式]_第2张图片

解决方案:

只需要给产生滚动条的标签加上一个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); /* 轨道的背景颜色 */
 }

你可能感兴趣的:(html+css)