CSS3改变浏览器滚动条样式

栏目: CSS3 · 发布时间: 5年前

内容简介:注:该方法只适用于 -webkit- 内核浏览器浏览器滚动条太宽,太丑,影响日常开发怎么办,改TA滚动条外观由2部分组成:1.滚动条整体滑轨 2.滚动条滑轨内滑块

注:该方法只适用于 -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;

}

CSS3改变浏览器滚动条样式

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

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

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

CSS3改变浏览器滚动条样式

CSS3改变浏览器滚动条样式 微信打赏

CSS3改变浏览器滚动条样式 支付宝打赏

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


以上所述就是小编给大家介绍的《CSS3改变浏览器滚动条样式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

马云内部讲话

马云内部讲话

阿里巴巴集团 / 红旗出版社 / 2010-12 / 28.00元

马云的话有什么其妙的地方? 为什么员工会把自己的CEO当作偶像? 世界都处在迷茫期,他如何确立阿里巴巴的价值观? 他怎样给已经是富翁的员工寻找新的激情? 风暴袭来,他怎么克服内心的恐惧? 他在互联网合纵连横的动机何在?一起来看看 《马云内部讲话》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具