问题浮现
对于项目系统的美化处理,除了UI设计稿与组件自定义设计,对于浏览器滚动条的美化也是必要的,谁也不想自己的界面和布局都设计得很完美,结果出现了下图的滚动条吧
那接下来我们实现一下类似cnblob的滚动条
具体实现
首先,我们需要创建一个类名autoList的div元素(一般来说这个类应该挂载到顶层的bodyDom,也可以对一些聊天框进行美化),给类autoList的dom元素添加滚动条
Css里面,-webkit开头的伪元素::实现了Chrome浏览器滚动条的样式,Firefox scrollbar-width: thin实现了FireFox浏览器滚动条的样式
.autoList {
overflow: auto;
scrollbar-width: thin; //兼容Firefox
}
//兼容Chrome
.autoList::-webkit-scrollbar {
width: 5px;
}
.autoList::-webkit-scrollbar-track {
background-color:#fff;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.autoList::-webkit-scrollbar-thumb {
background-color:#999;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
本文写的比较粗略,浏览器滚动条的美化有什么其他hack skill ,欢迎留言