如何使用(WebKit)CSS自定义浏览器滚动条 _WebKit

浏览器的滚动条, 可能是窗口中唯一与你的网站样式不匹配的东西, 如果你正在寻找如何自定义它, 对吗？
但是, 滚动条的定制并不是一件容易的事。不仅如此, 不仅使用CSS, 而且并非不可能。 Google Chrome在CSS中引入了-webkit-scrollbar选择器, 可让你根据需要使用纯CSS自定义滚动条。
基于webkit的浏览器允许你使用以下选择器将样式应用于滚动条：

::-webkit-scrollbar {/*Sel 1 -Properties*/}::-webkit-scrollbar-button{/*Sel 2 -Properties*/}::-webkit-scrollbar-track{/*Sel 3 -Properties*/}::-webkit-scrollbar-track-piece{/*Sel 4 -Properties*/}::-webkit-scrollbar-thumb{ /*Sel 5 -Properties*/}::-webkit-scrollbar-corner{/*Sel 6 -Properties*/}::-webkit-resizer{/*Sel 7 -Properties*/}

将每个选择器视为可滚动div的一部分：

文章图片
每个选择器都有不同的状态(伪选择器), 如以下示例所示：

:horizontal:vertical:decrement:increment:start:end :double-button:single-button:no-button:corner-present:window-inactive/** * when the track piece is on the start */::-webkit-scrollbar-track-piece:start {/* Select the top half (or left half) or scrollbar track individually */}/* When the thumb is in the vertical orientation*/::-webkit-scrollbar-thumb:vertical {height: 50px; background-color: black; }

下表描述了每种状态：

：水平	水平伪类适用于任何具有水平方向的滚动条。
：垂直	垂直伪类适用于任何具有垂直方向的滚动条。
：减量	减量伪类适用于按钮和跟踪片段。它指示按钮或轨道块在使用时是否会降低视图的位置(例如, 在垂直滚动条上向上, 在水平滚动条上左侧)。
：增量	增量伪类适用于按钮和跟踪片段。它指示按钮或轨道块在使用时是否会增加视图的位置(例如, 在垂直滚动条上向下, 在水平滚动条上右侧)。
：开始	start伪类适用于按钮和跟踪片段。它指示对象是否放置在拇指之前。
：结束	end伪类适用于按钮和跟踪片段。它指示对象是否放置在拇指之后。
：双键	双按钮伪类适用于按钮和轨道块。它用于检测一个按钮是否是位于滚动条同一端的一对按钮的一部分。对于履带板, 它指示履带板是否邻接一对按钮。
：单键	单按钮伪类适用于按钮和轨道块。它用于检测按钮是否位于滚动条末尾。对于履带板, 它指示履带板是否邻接单例按钮。
：无按钮	适用于曲目片断, 并指示曲目片断是否延伸到滚动条的边缘, 即, 曲目的那端没有按钮。
：corner-present	适用于所有滚动条, 并指示是否存在滚动条角。
：窗口无效	适用于所有滚动条, 并指示包含滚动条的窗口当前是否处于活动状态。 (在最近的夜间, 此伪类现在也适用于:: selection。我们计划将其扩展为可用于任何内容, 并将其提议为新的标准伪类。

玩以下小提琴：
或者在以下页面中查看更详细的示例：
如你所见, 此功能非常有前途且有趣。尝试结合许多选择器, 并在Google Chrome中实现自己的炫酷滚动条！
跨浏览器 【如何使用(WebKit)CSS自定义浏览器滚动条】到目前为止, 只有Google Chrome支持使用CSS的样式。但是, 这还不是历史的终点, 因为你仍然可以在每个浏览器上使用一个插件使用javascript实现滚动条的自定义。
在此处查看7个用Javascript(或jQuery)编写的最佳滚动条插件的集合。