1. 首页
  2. 前端

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

浏览器自带的滚动条比较呆板,在项目中为了提高界面的美观度,自定义美化滚动条是在所难免。可是遗憾的是,目前所有的自定义滚动条只能在基于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

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code