怎么在css中修改滚动条样式

这期内容当中小编将会给大家带来有关怎么在css中修改滚动条样式，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

CSS设置代码：

*{scrollbar-face-color:#fff;   scrollbar-arrow-color:#000;   scrollbar-shadow-color:#000000;   scrollbar-track-color:#dde3fa; }

此设置对所有滚动条都有作用。

为了兼容其他浏览器还需要做一些功夫。这里针对webkit浏览器做一些设置。同样我们还是有必要先了解其属性：

::-webkit-scrollbar{}::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下面gif图，需要注意的就是它会覆盖第三个属性的样式。::-webkit-scrollbar-thumb ：滚动条里面可以拖动的那部分::-webkit-scrollbar-corner ：边角，两个滚动条交汇处::-webkit-resizer ：两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）

使用伪元素设置CSS。

继续添加以下代码

::-webkit-scrollbar{background-color: #000}::-webkit-scrollbar-track {background-color: #7dc2f6;} ::-webkit-scrollbar-thumb {background-color: #1b99f7;} ::-webkit-scrollbar-button {background-color: #b9e0fd;} ::-webkit-scrollbar-corner {background-color: #018ef8;}

再次测试输出，现在IE和谷哥类浏览器都能看到变化了。

上述就是小编为大家分享的怎么在css中修改滚动条样式了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网行业资讯频道。