最新消息:文章中包含代码时,请遵守代码高亮规范!

CSS3改变浏览器滚动条样式[原创]

HTML+CSS Rin 224浏览 1评论

注:该方法只适用于 -webkit- 内核浏览器

浏览器滚动条太宽,太丑,影响日常开发怎么办,改TA

滚动条外观由2部分组成:1.滚动条整体滑轨 2.滚动条滑轨内滑块

在CSS中滚动条由3部分组成

name::-webkit-scrollbar //滚动条整体样式

name::-webkit-scrollbar-track //滚动条滑轨

name::-webkit-scrollbar-thumb //滚动条内部滑块

注:以上3个均为伪类,请将name更改为需要改变的元素名称

例如:改变整体页面的滚动条样式

body::-webkit-scrollbar{ //先改变body的滚动条宽度

width: 8px;

}

body::-webkit-scrollbar-track{//再改变body的滚动条轨道颜色

background: rgb(200, 200, 200);

border-radius: 5px;

}

body::-webkit-scrollbar-thumb{//最后改变body的滚动条滑轨相关的样式

background: rgb(120, 120, 120);

border-radius: 5px;

}


◆ 右侧为上部代码更改后的滚动条样式

◆ 可在样式中添加背景、透明度,边框,圆角等属性,使浏览器更美观

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/24897.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Rin的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情

网友最新评论 (1)

  1. 不错,赞一个
    匿名2019-05-08 16:10 回复