标签:
这几天,在网站测试的过程中注意到发布的代码过长导致代码显示部分左右滑动会出现很宽的滚动条,对于一个注重细节的码农,决定修改一下Chrome浏览器的滚动条样式。首先我们需要来了解一下修改滚动条样式的必备元素(伪元素)如下: ::-webkit-scrollbarCSS伪元素影响元素的滚动条风格,仅在基于 WebKit 的浏览器(例如: Google Chrome)中可用 ::-webkit-scrollbar-track定义滚动条轨道背景色 ::-webkit-scrollbar-thumb定义滑块 背景色+圆角以上属性足以简单修改Chrome浏览器的滚动条样式,具体代码已在下方列出/*滚动条样式开始*/::-webkit-scrollbar{width:8px;height:4px;background-color:#F5F5F5;}/*定义滚动条轨道背景色*/::-webkit-scrollbar-track{background:#fff;}/*定义滑块背景色+圆角*/::-webkit-scrollbar-thumb{border-radius:8px;background-color:#D2D2D2;}::-webkit-scrollbar-thumb:hover{border-radius:5px;background-color:#a2a2a2;}/*滚动条样式结束*/滚动条的颜色,粗细这些都看个人喜好的风格了,可以拿去稍加修改。(这段代码样式展示可以在Chrome浏览器上体验观看) 需要说明一下IE和火狐浏览器CSS样式无法兼容的原因,在MDN网站上原文说的是翻译过来大概就是说:此功能是非标准的,不规范的。不要在面向Web的生产站点上使用它;它不适用于每个用户。实现起来也可能存在很大的不兼容性,并且属性在未来可能会改变。(大家都懂的,各个浏览器都有自己的脾气和个性) 网上这种修改滚动条的插件也是一抓一大把,貌似网上最多的就是mCustomScrollbar可定制的自定义滚动条jQuery插件,具体该如何使用都有文档,在这就不多说了,自己琢磨吧。