1. 简介
本节不具有规范性。
内容作者并不一定希望所有的 滚动链 都出现在 滚动容器 中。有些 滚动容器 可能是 包含块链 的一部分,但在文档中可能有不同的逻辑用途,并且可能希望阻止滚动继续传递到 滚动链 上。为此,内容作者将安装不带 被动标志 的事件监听器,并在有可能发生滚动链的风险时使用 preventDefault。这样做有以下不利之处:
-
用户代理可能在未来引入内容作者的事件监听器不支持的新输入方法用于滚动。
-
非被动事件监听器将延迟滚动,因为用户代理必须等待事件监听器的结果,以确定是否调用了 preventDefault,从而导致滚动延迟增加。
-
当在 滚动边界 附近执行滚动时,默认操作 可能会导致滚动到 滚动容器 边缘,同时触发 边界默认操作。调用 preventDefault 不仅会取消 边界默认操作,还会取消滚动到 scrollport 边缘的操作。
-
事件的默认操作可能还提供了作者不想取消的其他行为,例如超滚动提示。而 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-x 和 overscroll-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-x 和 overscroll-behavior-y 属性。映射取决于元素的 书写模式。