如何通过css实现美丽的自定义滚动条

Ferrycoln • 2019年6月20日 pm4:53 • 前端 • 阅读 988

浏览器自带的滚动条比较呆板，在项目中为了提高界面的美观度，自定义美化滚动条是在所难免。可是遗憾的是，目前所有的自定义滚动条只能在基于webkit内核的浏览器上有效，像火狐、IE等会失效而显示原生的滚动条。如果考虑到渐进增强可以使用css进行美化控制，在这里使用简单的css就可以实现自定义滚动条，css样式如下：

/*
* STYLE
* 滚动条
*/
.scrollStyle::-webkit-scrollbar-track{
    background-color: #ffffff;
}
.scrollStyle::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background-color: #F5F5F5;
}
.scrollStyle::-webkit-scrollbar-thumb {
    background-color:#d49c9e;
}
.scrollStyle::-webkit-scrollbar-thumb:hover{
    background-color: #cb0001;
}

原创文章，作者：Ferrycoln，如若转载，请注明出处：https://ms200.cn/archives/941