CSS3改变浏览器滚动条样式

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

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

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

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

n am e :: -webk IT  -s crollbar //滚动条整体样式

name::-webkit-scrollbar -t rack //滚动条滑轨

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改变浏览器滚动条样式 全部内容，希望文章能够帮你解决 CSS3改变浏览器滚动条样式 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS3改变浏览器滚动条样式的详细内容...