srcmini浏览器的滚动条, 可能是窗口中唯一与你的网站样式不匹配的东西, 如果你正在寻找如何自定义它, 对吗？
但是, 滚动条的定制并不是一件容易的事。不仅如此, 不仅使用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中实现自己的炫酷滚动条！
跨浏览器
到目前为止, 只有Google Chrome支持使用CSS的样式。但是, 这还不是历史的终点, 因为你仍然可以在每个浏览器上使用一个插件使用javascript实现滚动条的自定义。
在此处查看7个用Javascript(或jQuery)编写的最佳滚动条插件的集合。
评论前必须登录！
注册