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改变浏览器滚动条样式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

算法设计手册

算法设计手册

斯基恩纳 / 清华大学出版社 / 2009-9 / 69.00元

《算法设计手册(第2版)》是算法设计畅销书的最新版本,是设计实用且高效算法的最全面指导书。《算法设计手册(第2版)》揭密了算法的设计与分析,以简单易懂的写作风格,介绍了各种算法技术,着重强调了算法分析,全书包括两大部分,“技术”部分介绍了设计和分析计算机算法的各种方法,“资源”部分给出了大量的参考资源,以及算法实现的各种资源,此外,在作者的个人网址http://www.CS.sunysb.edu/......一起来看看 《算法设计手册》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具