CSS自定义浏览器滚动条样式

2018年5月2日20:00:52 4 阅读(3,575)

本文最后更新于2018年9月12日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

摘要

浏览器滚动条可以自定义为你喜欢的样式，但是不同内核的浏览器显示，要用不同的方法，本文主要介绍Trident内核的浏览器和webkit内核的浏览器，浏览器代表：Internet Explorer和Google Chrome。

滚动条伪元素指示对象应该使用自定义滚动条。当这个伪元素存在时，将关闭其内置的滚动条渲染，并使用CSS中提供的信息。

代码如下：

/*Trident内核滚动条样式--start*/
body{
scrollbar-arrow-color: red; /*上下按钮上三角箭头的颜色*/
scrollbar-face-color: #CBCBCB; /*滚动条凸出部分的颜色*/
scrollbar-3dlight-color: blue; /*滚动条亮边的颜色*/
scrollbar-highlight-color: #333; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: yellow; /*滚动条阴影的颜色*/
scrollbar-darkshadow-color: green; /*滚动条强阴影的颜色*/
scrollbar-track-color: #ff0000; /*滚动条背景颜色*/
scrollbar-base-color: black; /*滚动条的基本颜色*/
}
/*Trident内核滚动条样式--end*/
/*webkit内核滚动条样式--start*/
::-webkit-scrollbar { /* 竖直方向滚动条整体部分 */
width:10px;
margin-right:2px;
}
::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
width:10px;
background-color: black;
}
::-webkit-scrollbar:horizontal { /*水平方向滚动条整体部分*/
height:10px;
margin-bottom:2px
}
::-webkit-scrollbar-track { /* 外层轨道 */
border-radius: 10px;
}
::-webkit-scrollbar-track-piece { /*内层轨道，滚动条中间部分 */
background-color: blue;
border-radius: 10px;
}
::-webkit-scrollbar-thumb { /* 滑块 */
width:10px;
border-radius: 5px;
background: #BFEFFF;
}
::-webkit-scrollbar-corner { /* 边角 */
width: 10px;
background-color: red;
}
::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
background: #8968CD;
}
/*webkit内核滚动条样式--end*/

效果如图：

Google Chrome浏览器

CSS自定义浏览器滚动条样式

Internet Explorer浏览器

CSS自定义浏览器滚动条样式

通过以上，我们就可以DIY自己的浏览器滚动条了。但是webkit提供了更多的伪类，大大丰富了滚动条样式。

所有这些伪元素都必须以前缀-webkit-.

以下内容参考：https://webkit.org/blog/363/styling-scrollbars/

:vertical - 垂直伪类适用于任何垂直方向的滚动条。
:decrement - 递减伪类适用于按钮和曲目片段。它指示按钮或轨道片段在使用时是否将递减视图的位置（例如，在垂直滚动条上，左侧水平滚动条上）。
:increment - 增量伪类应用于按钮和曲目片段。它指示按钮或轨道片段在使用时是否将增加视图的位置（例如，在垂直滚动条上，在水平滚动条上的右边）。
:start - 开始伪类适用于按钮和轨道片段。它指示对象是否放在拇指之前。
:end - 结束伪类适用于按钮和曲目片段。它指示对象是否放在拇指后面。
:double-button - 双按钮伪类应用于按钮和曲目片段。它用于检测按钮是否位于滚动条同一端的一对按钮的一部分。对于轨道部件，它指示轨道部件是否邻接一对按钮。
:single-button - 单按钮伪类适用于按钮和跟踪片段。它用于检测按钮本身是否在滚动条的末尾。对于轨道片段，它指示轨道片段是否邻接单个按钮。
:no-button - 适用于跟踪棋子并指示棋子是否跑到滚动条的边缘，即在棋子的那一端没有按钮。
:corner-present - 适用于所有滚动条，并指示滚动条角是否存在。
:window-inactive - 适用于所有滚动条，并指示包含滚动条的窗口当前是否处于活动状态。（这个伪类现在也适用于:: selection，我们计划扩展它以处理任何内容，并将其作为新的标准伪类提出来。）另外：enabled，：disabled，：hover和：active伪类也可用于滚动条。显示属性可以设置为无，以隐藏特定的部分。