个性化阅读
专注于IT技术分析

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

点击下载

浏览器的滚动条, 可能是窗口中唯一与你的网站样式不匹配的东西, 如果你正在寻找如何自定义它, 对吗?

但是, 滚动条的定制并不是一件容易的事。不仅如此, 不仅使用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)编写的最佳滚动条插件的集合。

赞(0)
未经允许不得转载:srcmini » 如何使用(WebKit)CSS自定义浏览器滚动条

评论 抢沙发

评论前必须登录!