【兼容Chrome和Firefox】浏览器滚动条美化

问题浮现

对于项目系统的美化处理，除了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 ，欢迎留言