CSS 溢出滚动行为模块 第一级

W3C 首次公开工作草案,

此版本:
https://www.w3.org/TR/2019/WD-css-overscroll-1-20190606/
最新发布版本:
https://www.w3.org/TR/css-overscroll-1/
编辑草案:
https://drafts.csswg.org/css-overscroll-1/
编辑:
(Google)
为此规范建议编辑:
GitHub 编辑器
问题追踪:
GitHub 问题

摘要

此模块定义了 overscroll-behavior 属性,用于控制当 滚动容器 的滚动位置到达 滚动端口的边缘时的行为。 这允许内容作者暗示不应触发诸如滚动链接和溢出滚动等 边界默认动作

CSS 是一种用于描述结构化文档(如 HTML 和 XML)在屏幕、纸张等上的渲染的语言。

本文档的状态

此部分描述了本文档在发布时的状态。其他文档可能会取代本文档。W3C 当前出版物的列表及此技术报告的最新修订版可在 W3C 技术报告索引找到。

本文档是首次公开工作草案

作为首次公开工作草案发布并不意味着 W3C 会员的认可。这是一个草案文件,可能会随时更新、替换或被其他文件废弃。引用本文档时不应视其为最终定稿,仅作为工作中的文件。

GitHub 问题是讨论此规范的首选方式。 提交问题时,请在标题中包含“css-overscroll”字样,最好是这样: “[css-overscroll] …评论摘要…”。 所有问题和评论都会存档,还有一个历史存档

本文档由CSS 工作组制作。

本文档由遵循W3C 专利政策的工作组制作。W3C 维护了一个与本工作组交付物相关的专利披露的公开列表;该页面还包括披露专利的说明。任何知悉包含必要专利权利要求的专利的人必须按照W3C 专利政策第 6 节进行披露。

本文档受2019年3月1日 W3C 流程文档管辖。

1. 简介

本节不具有规范性。

内容作者并不一定希望所有的 滚动链 都出现在 滚动容器 中。有些 滚动容器 可能是 包含块链 的一部分,但在文档中可能有不同的逻辑用途,并且可能希望阻止滚动继续传递到 滚动链 上。为此,内容作者将安装不带 被动标志 的事件监听器,并在有可能发生滚动链的风险时使用 preventDefault。这样做有以下不利之处:

因此,内容作者无法以一种健壮、高性能和前向兼容的方式控制 滚动链 和超滚动。overscroll-behavior 属性解决了这个缺陷。

2. 动机示例

一个固定定位的左侧导航栏不希望将滚动传递给文档,因为在导航栏上执行的滚动手势几乎从来都不是为了滚动文档。注意,使用原生的超滚动提示仍然是可取的,同时需要阻止滚动链的发生。
#sidebar {
  overscroll-behavior: contain;
}

在这种情况下,作者可以在侧边栏上使用 contain 来防止滚动被传递到父文档元素。

页面希望实现自己的下拉刷新效果,因此需要禁用浏览器的原生超滚动操作。
html {
  /* 只禁用下拉刷新,但允许滑动导航 */
  overscroll-behavior-y: contain;
}

在这种情况下,作者可以在视口定义元素上使用 contain 来防止超滚动触发导航操作。

无限滚动加载器在用户到达边界时加载更多内容,因此希望禁用可能引发混淆的橡皮筋效果以及滚动链。
#infinite_scroller {
  overscroll-behavior-y: none;
}

在这种情况下,作者可以在无限滚动加载器上使用 none 来防止滚动链和超滚动提示。

3. 滚动链与边界默认行为

操作系统有滚动规则,例如滚动链和超滚动提示。本规范并未规定是否以及如何实现滚动链或超滚动提示。本规范仅允许内容作者在实现时禁用它们。

滚动链 是指滚动从一个 滚动容器 传播到其祖先 滚动容器,遵循 滚动链。通常,滚动链从事件目标开始,递归向上遍历 包含块链。当链中的某个 滚动容器 接收到滚动事件或手势时,它可能会对此进行操作并/或将其传递到链上。链式滚动通常在 scrollport 到达其边界时进行。

滚动链 是指滚动从一个 滚动容器 传播到另一个的顺序。视口 参与 滚动链,作为文档的 scrollingElement,涉及滚动链中的位置以及遵守应用于它的链式规则。

滚动边界 是指当 滚动容器 的滚动位置到达 scrollport 的边缘时。如果滚动容器由于不在滚动方向上发生 溢出 而没有滚动的可能性,则该元素始终被视为在滚动边界。

边界默认操作 是指用户代理定义的在滚动到 scrollport 边缘时执行的 默认操作本地边界默认操作 是指在 滚动容器 上执行的 边界默认操作,例如显示超滚动UI提示。相反,非本地边界默认操作 则与页面交互,例如滚动链或导航操作。

4. 超滚动行为属性

超滚动行为 控制当 滚动容器scrollport 到达其滚动框的边界时允许的 边界默认操作

overscroll-behavior 属性指定 超滚动行为,允许内容作者指定某个 滚动容器 元素必须阻止滚动链和/或超滚动提示。

不是 滚动容器 的元素必须接受但忽略此属性的值。此属性必须应用于用户代理支持的所有滚动方法。

注意:此属性应提供至少与 preventDefault 同等强度的保证,防止滚动链和超滚动。否则,将导致内容作者使用 preventDefault 代替。

名称: overscroll-behavior
值: [ contain | none | auto ]{1,2}
初始值: auto auto
适用于: 滚动容器 元素
继承:
百分比: 不适用
计算值: 参见各个属性
规范顺序: 按语法
动画类型: 离散
媒体: 视觉

overscroll-behavior 属性是一个简写属性,用于按顺序设置 overscroll-behavior-xoverscroll-behavior-y 的指定值。如果只指定一个值,第二个值默认为相同的值。

这些值具有以下含义:

contain
此值表示元素不得执行 非本地边界默认操作,例如滚动链或导航。无论滚动是从此元素还是其子元素之一发起的,用户代理不得将滚动链传递给任何祖先沿 滚动链。此值不得修改 本地边界默认操作 的行为,例如显示任何超滚动提示。
none
此值表示与 contain 的行为相同,此外此元素还不得执行 本地边界默认操作,例如显示任何超滚动提示。
auto
此值表示用户代理应按照惯例执行 边界默认操作,涉及 滚动链、超滚动和导航手势。

注意:如果用户代理未实现滚动链和超滚动提示,则这些值对符合规范的实现不会产生任何副作用。

注意:编程滚动被限制,不能触发任何 边界默认操作

4.1. 物理长手形式的 overscroll-behavior

名称: overscroll-behavior-x, overscroll-behavior-y
值: contain | none | auto
初始值: auto
适用于: 滚动容器 元素
继承:
百分比: 不适用
计算值: 按指定值
规范顺序: 按语法
动画类型: 离散
媒体: 视觉

overscroll-behavior-x 属性指定水平方向的 超滚动行为overscroll-behavior-y 属性指定垂直方向的 超滚动行为。当同时在水平和垂直方向上执行滚动时,各自方向的 超滚动行为 应被独立考虑。

4.2. 流相关长手形式的 overscroll-behavior

名称: overscroll-behavior-inline, overscroll-behavior-block
值: contain | none | auto
初始值: auto
适用于: 滚动容器 元素
继承:
百分比: 不适用
计算值: 按指定值
规范顺序: 按语法
动画类型: 离散
媒体: 视觉

这些属性对应于 overscroll-behavior-xoverscroll-behavior-y 属性。映射取决于元素的 书写模式

5. 安全和隐私考虑

目前没有已知的与此功能相关的安全或隐私影响。该功能可用于阻止某些原生UI功能,例如超滚动提示和超滚动导航(如下拉刷新、滑动导航)。然而,这并不会暴露任何超出平台现有能力的内容,例如通过阻止会引发滚动的事件的默认操作。

一致性

文档约定

一致性要求通过描述性断言和RFC 2119术语的组合来表达。关键字“MUST”(必须)、“MUST NOT”(禁止)、“REQUIRED”(要求)、“SHALL”(应)、“SHALL NOT”(不应)、“SHOULD”(应该)、“SHOULD NOT”(不应该)、“RECOMMENDED”(建议)、“MAY”(可以)和“OPTIONAL”(可选)在本规范的规范部分中应按照RFC 2119中的说明进行解释。然而,为了可读性,这些词在本规范中并未全部使用大写字母。

本规范的所有文本都是规范性的,除非明确标记为非规范性的部分、示例和注释。[RFC2119]

本规范中的示例以“例如”一词引出,或与规范性文本分开显示,使用 class="example",如下所示:

这是一个信息性示例的示例。

信息性注释以“注”字开头,并使用 class="note" 与规范性文本分开显示,类似如下:

注,这是一个信息性注释。

建议是规范性部分,样式设计为引起特别注意,并使用 <strong class="advisement"> 与其他规范性文本分开显示,类似如下: 用户代理必须提供一个可访问的替代方案。

一致性类别

本规范的一致性定义了三个一致性类别:

样式表
一个 CSS样式表
渲染器
一个 UA,用于解释样式表的语义并渲染使用它们的文档。
创作工具
一个 UA,用于编写样式表。

如果样式表中使用的所有语法都符合本模块定义的通用CSS语法和每个特性的独立语法,那么该样式表符合本规范。

如果渲染器不仅按照相关规范解释样式表,还正确解析本规范定义的所有特性并相应渲染文档,那么该渲染器符合本规范。然而,因设备限制导致的UA无法正确渲染文档并不意味着该UA不符合规范。(例如,UA不要求在单色显示器上渲染颜色。)

如果创作工具编写的样式表在语法上符合通用CSS语法以及本模块中每个特性的独立语法,并满足本模块描述的样式表的所有其他一致性要求,那么该创作工具符合本规范。

负责实现CSS的要求

以下章节定义了负责任地实现CSS的一些一致性要求,以促进当前和未来的互操作性。

部分实现

为了让作者利用向前兼容的解析规则来分配回退值,CSS渲染器必须将任何没有可用支持级别的规则(包括 at-rules、属性、属性值、关键字和其他语法结构)视为无效并适当忽略。特别是,用户代理不得在单个多值属性声明中选择性地忽略不支持的属性值并仅应用支持的值:如果任何值被视为无效(如不支持的值),CSS要求忽略整个声明。

不稳定和专有特性的实现

为了避免与未来稳定的CSS特性发生冲突,CSS工作组建议遵循最佳实践来实现不稳定的特性和专有扩展

CR级特性的实现

一旦规范达到候选推荐阶段,实施者应发布任何已根据规范正确实现的CR级特性的无前缀实现,并避免暴露该特性的带前缀版本。

为了建立和维护CSS在不同实现中的互操作性,CSS工作组要求非实验性CSS渲染器在发布任何CSS特性的无前缀实现之前向W3C提交一个实现报告(如有必要,提交用于该实现报告的测试用例)。提交给W3C的测试用例将由CSS工作组进行审查和修正。

有关提交测试用例和实现报告的更多信息,请参阅CSS工作组的网站:https://www.w3.org/Style/CSS/Test/。如有问题,请联系 public-css-testsuite@w3.org 邮件列表。

索引

本规范定义的术语

参考定义的术语

参考文献

规范性引用

[CSS-OVERFLOW-3]
David Baron; Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 2018年7月31日. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 2019年1月31日. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 2018年5月24日. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[RFC2119]
S. Bradner. RFC文档中用于指示需求级别的关键词. 1997年3月. 最佳现行做法. URL: https://tools.ietf.org/html/rfc2119

属性索引

名称 初始值 适用于 继承 百分比 动画类型 规范顺序 计算值 媒体
overscroll-behavior [ contain | none | auto ]{1,2} auto auto 滚动容器元素 不适用 : 离散 按语法 见各个属性 视觉
overscroll-behavior-block contain | none | auto auto 滚动容器元素 不适用 : 离散 按语法 按指定值 视觉
overscroll-behavior-inline contain | none | auto auto 滚动容器元素 不适用 : 离散 按语法 按指定值 视觉
overscroll-behavior-x contain | none | auto auto 滚动容器元素 不适用 : 离散 按语法 按指定值 视觉
overscroll-behavior-y contain | none | auto auto 滚动容器元素 不适用 : 离散 按语法 按指定值 视觉