CSS 滚动锚定模块 第 1 级

1. 引言

如今，网络用户常常因视口外发生的变化而分心，导致内容在页面中移动。 例如脚本插入包含广告的 iframe，或在慢速网络上加载未指定大小的图片。

历史上，浏览器的默认行为是在发生此类变化时保留绝对滚动位置。 这意味着，为了避免内容移动，网页可以尝试在页面上为稍后加载的内容预留空间。 实际上，极少有网站能一致地做到这一点。

滚动锚定旨在尽量减少意外的内容移动。 它通过调整滚动位置来补偿视口外的变化。

解释文档非正式地概述了滚动锚定。

1.1. 值的定义

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

除了其定义中列出的属性特定值外， 本规范中定义的所有属性也接受 CSS-wide 关键词 作为其属性值。 为了可读性，这些关键词未被显式重复列出。

2. 描述

滚动锚定尝试在布局变化时保持用户对文档视图的稳定。 它通过选择一个 DOM 节点（称为 锚点节点） 来决定调整滚动位置。

但是，如果滚动容器当前 对齐 到某个元素， （参见 [CSS-SCROLL-SNAP-1]） 滚动锚定仅限于允许通过重新对齐的调整。

2.1. 锚点节点选择

每个滚动框都旨在选择一个锚点节点，该节点在 DOM 中很深， 并且应优先作为重要的 DOM 节点，或靠近其最佳视图区域的块起始边缘。

注意：如果用户代理不支持scroll-padding属性， 则滚动框的最佳视图区域等同于其内容区域。

锚点节点可以是任何盒子，但不能是非原子内联的盒子。 锚点节点始终是滚动框的后代。 在某些情况下，滚动框可能不会选择任何锚点节点。

元素C是滚动框S的滚动锚点的可行候选，如果它满足以下所有条件：

• C 是一个元素，而非非原子内联元素。

• C 在S中部分可见或完全可见。

• C 是S的后代。

• C 不在排除的子树中。

• C 直到S的所有祖先都不在排除的子树中。

某些元素被认为是锚点选择的优先候选：

1. 文档的DOM 锚点。

2. 包含当前活动的页面查找用户代理算法匹配结果的元素。如果匹配结果跨多个元素，则只考虑第一个元素。

请注意，如果优先候选是非原子内联元素， 则应考虑其最近的非原子内联元素祖先作为优先候选。

从概念上讲，每当任何滚动框的滚动位置发生变化时，都会为每个滚动框重新计算一个锚点节点。 （作为性能优化，可能会在需要锚点节点时才进行计算。）

2.2. 滚动调整

如果选择了锚点节点， 当锚点节点移动时， 浏览器会计算锚点节点的滚动锚定边界矩形的块起始边缘相对于滚动内容块起始边缘的之前偏移量y0和当前偏移量y1， 方向为滚动器的块流方向。

然后，它会在块流方向上排队一个y1 - y0的滚动位置调整， 在抑制窗口结束时执行。

滚动调整是一种由[CSSOM-VIEW]定义的[[cssom-view-1#scrolling-events#scrolling]]类型， 并按照那里描述的方式生成滚动事件。

2.2.1. 抑制窗口

每次锚点节点移动都会发生在一个称为抑制窗口的时间窗口内， 定义如下：

• 抑制窗口从当前迭代的HTML 处理模型事件循环的开始时刻开始， 或者从最近完成的抑制窗口结束时刻开始，以较近的时间为准。

• 抑制窗口在当前迭代的HTML 处理模型事件循环结束时结束， 或者在下一个操作之前，该操作的结果或副作用会因滚动位置的变化而不同 （例如调用getBoundingClientRect()）， 以先到者为准。

注意： 一旦滚动锚定 API 稳定，抑制窗口的边界应并入 HTML 标准。

在同一个抑制窗口内可能会发生多次锚点节点移动。

在抑制窗口结束时， 用户代理会执行所有在窗口期间排队的且未被任何抑制触发器抑制的滚动调整。

2.2.2. 抑制触发器

抑制触发器是指在锚点节点移动的抑制窗口内发生的操作， 如果发生这些操作，则会抑制滚动锚定调整。 这些触发器包括：

• 以下任何属性的计算值发生变化， 无论是锚点节点还是滚动元素（或文档）路径上的任何元素：

  • top，left，right，或bottom

  • margin或其长格式属性

  • padding或其长格式属性

  • width，height，min-width，max-width，min-height，或max-height

  • position

  • transform

• 滚动元素（或文档）中任何元素的position属性的计算值发生变化， 导致该元素成为或停止成为绝对定位元素。 请注意，无论修改的元素是否在锚点节点到滚动元素的路径上，此触发器都适用。

• 滚动元素的滚动偏移为零。

注意：抑制触发器是为了与现有的 web 内容兼容，这些内容由于在滚动事件处理程序中导致的内容移动而与滚动锚定发生负面交互。

3. 排除 API

滚动锚定的目标是在启动时成为默认行为， 以便用户即使在旧内容上也能从中受益。overflow-anchor可以禁用 整个网页或部分网页中的滚动锚定（选择退出）， 或将部分 DOM 排除在锚点节点选择算法之外。

值定义如下：

auto

声明该元素有资格参与由该元素或其祖先创建的任何滚动框的锚点节点选择算法。

none

声明该元素及其后代 （不包含嵌套在另一个滚动元素内的后代） 不有资格参与由该元素或其祖先创建的任何滚动框的锚点节点选择算法。

注意： 无法为overflow-anchor: none元素的后代重新开启滚动锚定。 但是，后代滚动容器会自动为它们自己的滚动框重新开启该功能， 除非它们明确设置了overflow-anchor: none。

注意： overflow-anchor属性还曾被提议用于CSS 粘性滚动条， 但现在该规范已被取代。

4. 隐私和安全考虑

本规范仅调整我们如何计算滚动位置， 不引入新的隐私或安全问题。

变更

自 2020 年 2 月 11 日工作草案以来的变更

• 添加了可行候选和优先候选的定义。

• 澄清了滚动锚定与滚动对齐之间的交互。