CSS 滚动条样式模块 第 1 级

1. 引言

本节为非规范性内容。

该 CSS 模块引入了影响滚动条视觉样式的属性，包括它们的颜色（scrollbar-color）和厚度（scrollbar-width）。

1.1. 范围

CSS 滚动条模块专门用于样式化滚动条控件本身，例如它们在第 1 级的颜色和宽度，而不是它们的布局或任何内容是否可滚动。所有布局影响和内容可滚动性在CSS 溢出模块中说明。

根据文档中的用例，该模块旨在解决关于滚动条的三种主要用例：

1. 为滚动条着色，以更好地适应网页应用的 UI。
2. 在滚动区域较小时使用较薄的滚动条。
3. 隐藏用户代理提供的滚动条，以便提供自定义的滚动接口，而不影响其他滚动性方面。

1.1.1. 超出范围

滚动条的内部结构、布局和配置，以及对其颜色的精确控制，不在本范围之内。这是因为不同平台具有不同的滚动条结构和样式约定，操作系统不断发展其滚动条设计，以提供更好的用户体验。选择滚动条特定部分的伪元素，例如，被考虑并被拒绝。虽然这种细微控制对作者而言具有吸引力，但各种部分的排列——或是否全部存在——无法依赖。提供过多的控制可能会导致作者在某些平台上获得完美结果，但以牺牲其他平台的结果为代价。

注意： 向 Web 暴露与滚动条相关的::-webkit- 前缀伪元素被 CSS 工作组和 Webkit 视为错误。

1.2. 值定义

本规范遵循CSS 属性定义约定，来源于[CSS2]，使用值定义语法，来源于[CSS-VALUES-3]。本规范未定义的值类型在 CSS 值和单位[CSS-VALUES-3]中定义。与其他 CSS 模块的组合可能扩展这些值类型的定义。

除了在其定义中列出的特定于属性的值外，本规范中定义的所有属性也接受CSS 宽关键字作为其属性值。为了可读性，这些值没有被重复明确列出。

2. 滚动条颜色：scrollbar-color 属性

此属性允许作者设置元素滚动条的颜色。

用户代理必须将根元素上设置的 scrollbar-color 值应用于视口。

注意：与overflow （以及 overflow-*）属性不同，设置在 HTML body 元素上的 scrollbar-color 值不会传播到视口。

auto

用户代理决定滚动条的颜色。 应遵循平台约定， 但可以根据color-scheme或其他上下文信息进行调整， 以更好地适应页面。

<color>

将第一个颜色应用于滚动条的滑块， 第二个颜色应用于滚动条的轨道。

详细信息：

轨道指的是滚动条的背景， 通常在滚动位置上是固定的。

滑块指的是滚动条的移动部分， 通常悬浮在轨道上方。

如果该属性计算出的值不同于auto， 实现可能会渲染出比默认平台 UI 渲染更简单的滚动条， 并相应地为其着色。

注意：有时用户代理无法自定义本机 滚动条的颜色， 可能是由于其结构或本机工具包提供的控制权不足。 上述规定允许用户代理用其能够着色的不同构造的滚动条替换它们。

(注意：添加示意图显示不同命名部分 - 类似于http://www.howtocreate.co.uk/tutorials/scrlbar.html)

(注意：添加一个溢出元素的示例，其颜色化的滚动条与页面样式相匹配， PNG图像在支持它的浏览器中的相同效果)

实现可以忽略任何颜色， 如果对应的部分在基础平台上不存在。

当使用scrollbar-color属性并指定颜色值时， 作者应确保指定的颜色之间有足够的对比度。 对于关键字值，用户代理应确保使用的颜色有足够的对比度。 请参见WCAG 2.1 SC 1.4.11 非文本对比度 [WCAG21]。 用户代理可能会根据明确的用户偏好忽略这些对比度要求 （例如，当用户选择一个配置选项/设置时， 始终确保特定的滚动条颜色/使用系统默认滚动条）。

注意：当用户与滚动条交互时（例如，悬停或 激活）， 实现可能会改变哪些滚动条颜色适用于哪些滚动条部分。

注意：IE 使用命名的系统颜色作为每个滚动条 颜色属性的默认值。 参见相关问题 1956。

html {
    scrollbar-color: ThreeDFace Scrollbar;
}

3. 滚动条厚度：scrollbar-width 属性

此属性允许作者指定元素滚动条的所需厚度。

auto

实现必须使用默认的滚动条宽度。

注意：在大多数系统上，这对应于传统的较宽滚动条。 然而，通过操作系统或用户代理设置，用户可以更改此默认设置，使默认滚动条的宽度可能大于或小于典型值。

thin

实现应使用比auto更薄的滚动条。 这可能意味着平台提供的滚动条的细变体，或比默认平台滚动条更薄的自定义滚动条。 但滚动条必须保持足够的宽度以便可用。 （实现者可能希望参考WCAG 2.1 SC 2.5.5 目标大小。[WCAG21]）

注意：用户代理可以使用各种策略确保窄滚动条的可用性。 例如，在覆盖滚动条的情况下， 它们可以在用户尝试与其交互时动态增大滚动条。 在触摸屏设备上，用户代理也可以调整如何解释手指点击，以便更方便地与视觉上小的触摸目标进行交互。

用户代理可以忽略此值并将其视为auto， 例如，当用户通过某个用户代理或操作系统设置表示对薄滚动条的不适时。 （鼓励用户代理提供这样的设置。）

注意：某些平台默认只有一个微小的滚动条，无法合理地变得更薄。 在这种情况下，此值将表现得像auto。

none

实现必须不显示任何滚动条，但元素的滚动性不受其他方式的影响。

使用此值可能会导致仅使用鼠标的用户无法滚动。作者应确保仅使用鼠标的用户仍然能够到达隐藏的内容，即使他们没有滚轮。

使用none的作者应提供一种替代/等效的视觉提示，以表明可以滚动且有更多内容。

注意：对于只通过程序手段而不是直接用户操作来滚动的情况，作者应使用overflow: hidden而不是scrollbar-width: none。

* { scrollbar-width: auto !important; }

用户代理必须将根元素上设置的scrollbar-width值应用于视口。

注意：与overflow属性（及其长形式）不同，在HTML body 元素上设置的scrollbar-width值不会传播到视口。

注意：此规范未定义滚动条的确切位置或形状， 也不包括任何动画效果，例如渐变或滑入/滑出视图。

附录 A. 感谢

本附录为非规范性。

感谢Tab Atkins和Xidorn Quan的用例、原型、实施和反馈。感谢#3315中来自Patrick H. Lauke的可访问性审查和贡献。

附录 B. 变更

本附录为非规范性。

自2021-12-02 工作草案以来的变更

• CR的样板更改

自2021-08-05 工作草案以来的变更

• 将关于狭窄滚动条的“应该”改为“必须”。（见问题6675）

自2018-09-25 第一个公共工作草案以来的变更

• #6538：移除了scrollbar-color的light和dark值，允许用户代理根据color-scheme或其他上下文信息调节auto。
• #3237：滚动条颜色的计算值改为：指定关键字或两个计算颜色。
• #4693：澄清范围：样式滚动条控件本身，而非布局或滚动能力。
• #3315：对scrollbar-color和scrollbar-width的可访问性考虑进行了更多更新。

附录 C. 安全性和隐私考虑

本附录为非规范性。

安全性考虑

未发现与本规范相关的具体安全问题。

隐私考虑

未发现与本规范相关的具体隐私问题。

自我审查问卷

根据自我审查问卷：安全性和隐私：需考虑的问题

1. 本规范是否涉及个人可识别信息？

   没有。

2. 本规范是否涉及高价值数据？

   没有。

3. 本规范是否引入在浏览会话之间持久存在的原点状态？

   没有。

4. 本规范是否向网络暴露持久的跨源状态？

   没有。

5. 本规范是否向原点暴露其他当前没有访问权限的数据？

   没有。

6. 本规范是否启用新的脚本执行/加载机制？

   没有。

7. 本规范是否允许原点访问用户的位置？

   没有。

8. 本规范是否允许原点访问用户设备上的传感器？

   没有。

9. 本规范是否允许原点访问用户本地计算环境的某些方面？

   没有。

10. 本规范是否允许原点访问其他设备？

    没有。

11. 本规范是否允许原点对用户代理的本地 UI 有一定控制？

    是的。scrollbar-* 属性允许页面更改用户代理本地 UI 的滚动条的颜色和宽度，例如页面窗口中的滚动条、嵌入页面的框架内容中的滚动条或页面中溢出元素的滚动条。

12. 本规范是否向网络暴露临时标识符？

    没有。

13. 本规范是否区分第一方和第三方上下文中的行为？

    没有。

14. 本规范在用户代理的“隐身”模式下应该如何工作？

    没有不同。

15. 本规范是否将数据持久化到用户的本地设备？

    没有。

16. 本规范是否有“安全性考虑”和“隐私考虑”部分？

    是的。

17. 本规范是否允许降低默认安全特性？

    没有。

附录 D. 可访问性考虑

本附录为非规范性。