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;
}
未经允许不得转载:码上小站 » 如何通过css实现美丽的自定义滚动条

发表评论

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

联系我们

在线咨询:在线咨询

邮件:1508488207@qq.com

QR code
隐藏
变装