滚动条样式

WebKit 现在支持为溢出部分、列表框、下拉菜单和文本区域中的滚动条设置样式。对于那些想跳过文章直接查看源代码的人，这里有一个示例。

对于未运行足够新版本 WebKit 的用户，这里有一个截图

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

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

滚动条元素上的 width 和 height 属性表示垂直滚动条的宽度和水平滚动条的高度。这些值也可以指定百分比，在这种情况下，滚动条将占用视口区域的该百分比。

滚动条由滚动条按钮和轨道组成。轨道本身又细分为轨道片段和滑块。轨道片段表示滑块上方和下方的区域。

此外，现在可以对滚动条角落以及可调整大小文本区域使用的调整器进行样式设置。

以下是所有新伪元素的完整列表。所有这些伪元素都必须以 -webkit- 为前缀。

scrollbar
scrollbar-button
scrollbar-track
scrollbar-track-piece
scrollbar-thumb
scrollbar-corner
resize

每个对象都可以使用边框、阴影、背景图像等进行样式设置，以创建完全自定义的滚动条，同时仍将遵循操作系统的按钮放置和点击行为设置。

以下伪类已引入并可应用于伪元素。

:horizontal – 水平伪类应用于任何具有水平方向的滚动条片段。

:vertical – 垂直伪类应用于任何具有垂直方向的滚动条片段。

:decrement – 递减伪类应用于按钮和轨道片段。它指示使用时按钮或轨道片段是否会递减视图位置（例如，垂直滚动条上的向上，水平滚动条上的向左）。

:increment – 递增伪类应用于按钮和轨道片段。它指示使用时按钮或轨道片段是否会递增视图位置（例如，垂直滚动条上的向下，水平滚动条上的向右）。

:start – 开始伪类应用于按钮和轨道片段。它指示对象是否放置在滑块之前。

:end – 结束伪类应用于按钮和轨道片段。它指示对象是否放置在滑块之后。

:double-button – 双按钮伪类应用于按钮和轨道片段。它用于检测按钮是否是滚动条同一端一对按钮的一部分。对于轨道片段，它指示轨道片段是否与一对按钮相邻。

:single-button – 单按钮伪类应用于按钮和轨道片段。它用于检测按钮是否单独位于滚动条的末端。对于轨道片段，它指示轨道片段是否与一个单独的按钮相邻。

:no-button – 应用于轨道片段，指示轨道片段是否延伸到滚动条的边缘，即轨道在该端没有按钮。

:corner-present – 应用于所有滚动条片段，指示是否存在滚动条角落。

:window-inactive – 应用于所有滚动条片段，指示包含滚动条的窗口当前是否处于非活动状态。（在最近的夜间构建版本中，此伪类也适用于 ::selection。我们计划将其扩展到适用于任何内容，并提议其成为一个新的标准伪类。）

此外，:enabled、:disabled、:hover 和 :active 伪类也适用于滚动条片段。

display 属性可以设置为 none 以隐藏特定片段。

滚动条轴线上支持外边距。它们可以是负值（例如，这样轨道可以膨胀以部分覆盖按钮）。

上述链接的示例提供了一个非常复杂的滚动条，它具有所有 OS X 滚动条行为（双按钮、非活动外观、轨道与按钮重叠等）以及许多 Windows Vista 滚动条行为（悬停效果、轨道上方和下方独特的按下外观等）。