如何更改滚动条样式?(设置滚动条样式)

设置滚动条样式(如何更改滚动条样式?)

如何自定义浏览器的滚动条呢,下面给大家讲解一下,其实很简单,通过设定css样式就可以实现。

如何更改滚动条样式?

CSS

一、示例代码

/*滚动条整体样式*/
body::-webkit-scrollbar { 
 width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
 height: 4px;
}
/*滚动条里面小方块*/
body::-webkit-scrollbar-thumb { 
 border-radius: 5px;
 -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 background: #FFF;
}
/*滚动条里面轨道*/
body::-webkit-scrollbar-track { 
 -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 border-radius: 0;
 background: #393D49;
}

二、效果展示

实际效果请参考本站浏览器滚动条样式。

(0)
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 ZLME@ZLME.COM 举报,一经查实,立刻删除。

相关推荐