怎么在CSS3中改变浏览器滚动条样式 - 行业资讯 - 肥雀云

　　介绍

今天就跟大家聊聊有关怎么在CSS3中改变浏览器滚动条样式,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

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

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

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

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

名称::-webkit-scrollbar //滚动条整体样式　　　　名称::-webkit-scrollbar-track //滚动条滑轨　　　　名称::-webkit-scrollbar-thumb //滚动条内部滑块

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

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

身体::-webkit-scrollbar{,//先改变身体的滚动条宽度　　　　宽度:8 px; 　　　　} 　　　　身体:-webkit-scrollbar-track{//再改变身体的滚动条轨道颜色　　　　背景:,rgb (200,, 200,, 200); 　　　　border - radius: 5 px; 　　　　} 　　　　身体:-webkit-scrollbar-thumb{//最后改变身体的滚动条滑轨相关的样式　　　　背景:,rgb (120,, 120,, 120); 　　　　border - radius: 5 px; 　　　　}

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

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

看完上述内容,你们对怎么在CSS3中改变浏览器滚动条样式有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。