CSS滚动捕捉模块第1级

1. 引言

本节不是规范性内容。

流行的用户体验范式在可滚动内容中通常采用分页或逻辑分区。 这在触摸交互中尤为明显， 用户通过平铺排列的内容快速滑动要比通过点按导航深入层级结构要更快、更容易。 例如，用户通过照片幻灯片视图快速浏览照片专辑中的多张照片 要比逐个点击专辑中的照片更方便。

然而，由于触摸滑动和鼠标滚轮滚动等滚动输入的不精确特性， 网页开发者很难保证良好的滚动体验， 尤其是创造分页效果。 例如，用户可能会落在一个不合适的滚动位置， 使得某个项目部分出现在屏幕上。

为此，本模块引入了滚动捕捉位置，用于强制规定滚动容器的滚动视口在滚动操作完成后可以结束的滚动位置。

此外，为了在捕捉关闭时提供更好的分页和滚动位置控制， 本模块定义了滚动内边距属性 用于所有滚动容器， 以调整滚动容器的最佳查看区域， 以便进行分页和滚动到视图操作。 类似地，滚动外边距属性可以用于任何盒子 以调整其可视区域， 用于滚动到视图操作。

1.1. 模块交互

本模块扩展了[CSS2]第11.1节中定义的滚动用户界面功能。

本模块中的属性不适用于::first-line和::first-letter伪元素。

1.2. 值定义

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

除了在定义中列出的属性特定值， 本规范定义的所有属性 还接受CSS全局关键字作为属性值。 为了可读性，这些未被明确重复。

2. 激励示例

在此示例中，一系列排列在滚动容器中的图像被用来构建照片画廊。在此示例中 滚动容器大于包含的照片 （以便可以同时看到多张图像），而且图像 尺寸各异。使用强制的基于元素的捕捉 位置，滚动将始终以图像居中在滚动容器的滚动视口结束。

img {
    /* 指定每张照片的中心应与滚动的中心对齐 */
    scroll-snap-align: none center;
}
.photoGallery {
    width:500px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* 要求在滚动操作完成时滚动位置始终处于捕捉位置。 */
    scroll-snap-type: x mandatory;
}

<div class="photoGallery">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <img src="img4.jpg">
    <img src="img5.jpg">
</div>

此示例构建了一个分页文档，使每个 页面靠近（但不完全在）滚动 容器的边缘。 这使得前一页可以“窥视”上方，以使用户意识到他们尚未 到达文档顶部。 使用临近捕捉位置而不是强制捕捉位置允许用户在 页面中途停止（而不是强迫他们 一次捕捉一页）。然而，如果滚动操作将在捕捉位置附近完成，则滚动将被调整以 对齐页面，如所指定。

.page {
    /* 将每个页面的顶部定义为应用于捕捉的边缘 */
    scroll-snap-align: start none;
}
.docScroller {
    width:500px;
    overflow-x: hidden;
    overflow-y: auto;
    /* 指定每个元素的捕捉区域应与顶部边缘偏移100px对齐。 */
    scroll-padding: 100px 0 0;
    /* 鼓励在滚动操作完成时以捕捉位置结束，如果它接近捕捉位置 */
    scroll-snap-type: y proximity;
}

<div class="docScroller">
    <div class="page">
    第 1 页</div>
    <div class="page">
    第 2 页</div>
    <div class="page">
    第 3 页</div>
    <div class="page">
    第 4 页</div>
</div>

3. 滚动捕捉模型

本模块定义了滚动捕捉位置， 这些是能够在滚动容器中产生特定内容对齐的滚动位置。 通过在相关滚动容器上使用scroll-snap-type 属性，作者可以请求滚动视口在滚动操作后（包括诸如scrollTo()方法的程序滚动）停留在捕捉位置上。

捕捉位置 被指定为元素的滚动捕捉区域 （其边框边界框，由scroll-margin修改）在滚动容器的捕捉视口 （其滚动视口，经过scroll-padding减少）中的特定对齐（scroll-snap-align）。 这在概念上等同于在对齐容器中指定对齐对象的对齐。 满足指定对齐的滚动位置是捕捉位置。

调整滚动容器的滚动视口位置，使其对齐到捕捉位置的行为称为捕捉，如果滚动容器的滚动视口的滚动位置位于该捕捉位置并且没有活动的滚动操作，则称该滚动容器已经捕捉到某个捕捉位置。CSS滚动捕捉模块有意不指定或强制使用任何精确的动画或物理机制来强制实现捕捉位置；这些由用户代理自行决定。

捕捉位置 仅影响元素在其滚动容器上的最近祖先。

4. 捕捉滚动捕捉区域：滚动容器上的属性

4.1. 滚动捕捉规则：scroll-snap-type 属性

scroll-snap-type 属性指定 一个滚动容器是否为滚动捕捉容器， 其严格程度及 考虑的轴。 如果未指定严格值，则假定为接近。

html {
  scroll-snap-type: block;   /* 应用于主文档滚动器 */
}
h1, h2, h3, h4, h5, h6 {
  scroll-snap-align: start;  /* 捕捉到视口的开始（顶部） */
}

用户代理必须将根元素上设置的scroll-snap-type值应用于文档视口。 请注意，与overflow不同，scroll-snap-type值不会从HTML body传播。

4.1.1. 滚动捕捉轴：x、y、block、inline和both 值

轴值指定受捕捉位置 影响的轴，并且判断捕捉位置是按轴独立评估， 还是作为2D点一起评估。 值定义如下：

x

该滚动容器在其水平轴上仅对捕捉到捕捉位置。

y

该滚动容器在其垂直轴上仅对捕捉到捕捉位置。

block

该滚动容器在其块轴上仅对捕捉到捕捉位置。

inline

该滚动容器在其行内轴上仅对捕捉到捕捉位置。

both

该滚动容器在其两个轴上独立对捕捉到捕捉位置（可能在每个轴上捕捉到不同的元素）。

4.1.2. 滚动快照严格性：无，接近，和强制 值

严格性值严格性值（无，接近，强制） 指定滚动容器上如何严格地执行快照位置（通过强制调整滚动位置）。 值定义如下：

无

如果在滚动容器上指定，则 滚动容器 不得快照。

强制

如果在滚动容器上指定， 则当没有活动滚动操作时，滚动容器 必须快照到快照位置。 如果存在有效的快照位置 则滚动容器必须在滚动终止时快照 （如果不存在，则不发生快照）。

接近

如果在滚动容器上指定， 则滚动容器 可以在滚动终止时快照到快照位置， 具体由用户代理根据滚动参数决定。

作者应考虑使用强制快照位置，以适应不同尺寸的屏幕和（如适用）不同尺寸的内容。 特别是，虽然用户代理会处理对比滚动区域较大的快照元素的访问， 如果作者将强制快照分配给不相邻的兄弟元素， 则在内容比屏幕长的情况下，内容中间的部分可能会变得无法访问。

如果一个框捕获快照位置， 则它是滚动容器 或在无之外的值的scroll-snap-type。 如果一个框的最近快照位置捕获祖先 在其包含块链上是一个滚动容器且对无的值为scroll-snap-type， 则这是该框的快照容器。 否则，该框没有快照容器， 其快照位置不会触发快照。

4.1.3. 布局变化后的重新捕捉

如果文档的内容或布局发生变化 （例如，内容被添加、移动、删除、调整大小）， 使得 snapport 的内容发生变化， 用户代理必须重新评估结果的 滚动位置， 如有需要则重新捕捉。 如果 滚动容器 在内容变化前已被 捕捉 并且相同的 捕捉位置 仍然存在 （例如，其关联元素未被删除）， 则在内容变化后，滚动容器必须重新捕捉到该位置。 如果多个框在之前被 捕捉， 而它们的 捕捉位置 不再重合， 则如果其中一个获得焦点或被选中， 则 滚动容器 必须重新捕捉到该框， 否则重新捕捉到哪个则由用户代理定义。 （用户代理可以例如跟踪被捕捉的元素， 随着布局的变化而调整其他元素的 捕捉位置。）

重新捕捉到新的或不同框的滚动操作 必须像任何其他滚动到视图操作一样表现和动画， 包括遵循如 scroll-behavior 这样的控制。 然而，重新捕捉到之前相同框的滚动行为是由用户代理定义的。 用户代理可以例如，当捕捉到某个部分的开始时， 选择不将滚动动画到该部分的新位置， 因为内容在文档的早期动态添加，以创建不滚动的错觉。

.log {
  scroll-snap-type: proximity;
  align-content: end;
}
.log::after {
  display: block;
  content: "";
  scroll-snap-align: end;
}

4.2. 滚动快照区域：scroll-padding 属性

此属性指定（对于所有滚动容器，不仅仅是滚动快照容器） 定义滚动端口的最佳观看区域的偏移量： 该区域用于将事物放置在用户视野中的目标区域。 这允许作者排除被其他内容（如固定位置的工具栏或侧边栏）遮挡的滚动端口区域， 或简单地在目标元素和滚动端口的边缘之间留出更多的空间。

scroll-padding 属性是一个简写属性， 该属性在一个声明中设置所有scroll-padding-* 长属性， 将值分配给表示每一边的长属性，就像padding 属性对其长属性所做的那样。 值具有以下含义：

<length-percentage>

定义从滚动端口的相应边缘的内部偏移量。 当应用于根视口时， 偏移量相对于布局视口（而非视觉视口）进行计算和应用， 方式与内边距属性对固定位置盒子的处理相同； 最佳观看区域是与视觉视口相交的剩余区域。

auto

表示相应边缘的滚动端口的偏移量由用户代理决定。 这通常应默认为使用长度0px， 但用户代理可以使用启发式方法检测何时更适合使用非零值。

例如，用户代理可以检测何时使用position:fixed元素作为不透明的不可滚动“标题”， 遮挡下面的内容，并将顶部偏移量解析为该元素的高度，以便“向下翻页”操作（如按下PgDn） 自动滚动一个“可见页面”的内容。

这些偏移量减少了滚动端口中被视为“可见”的区域用于滚动操作： 它们对布局、滚动原点或初始位置没有影响， 也不影响元素是否被认为是实际可见的， 但应影响元素或光标是否被认为已滚动到视图中（例如，针对或聚焦操作）， 并减少翻页操作的滚动量（例如使用PgUp和PgDn键 或从滚动条触发等效操作）， 以便在滚动端口的最佳观看区域中，用户看到的是连续的内容流。

对于滚动捕捉容器，此区域还定义了滚动捕捉视口——计算捕捉位置时，用作对齐容器的滚动视口区域。

html {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 500px 0 0;
}
.toolbar {
    position: fixed;
    height: 100%;
    width: 500px;
    right: 0;
}
img {
    scroll-snap-align: none center;
}

用户代理必须将根元素上设置的scroll-padding 值应用于文档视口。 （注意，与overflow 不同，scroll-padding 值并不会从HTML body 传播。）

5. 对齐滚动快照区域：元素上的属性

5.1. 滚动快照区域：scroll-margin 属性

该属性是一个简写属性，可以在一个声明中设置 所有的scroll-margin-* 长属性， 其值代表每一侧的长属性， 就像margin 属性 对其长属性的处理一样。

值表示定义的外边距，形成用于捕捉此盒子的滚动捕捉区域。 滚动捕捉区域是通过 获取变换后的边框盒子，找到其矩形边界框（在滚动容器的坐标空间中轴对齐）， 然后添加指定的外边距来确定的。

注意： 这确保了滚动捕捉区域始终是矩形的， 并且与滚动 容器的坐标空间轴对齐。

如果页面导航到定义目标元素的片段 （一个将与:target 匹配的元素，或scrollIntoView()的目标）， 用户代理应使用该元素的滚动捕捉区域， 而不仅仅是其边框盒子， 来确定将哪些区域带入视图可滚动溢出区域， 即使捕捉已关闭或未在此元素上应用。

5.2. 滚动快照对齐：scroll-snap-align 属性

scroll-snap-align 属性指定 盒子的捕捉 位置作为其捕捉区域 （作为对齐主题）在其捕捉容器的捕捉端口（作为对齐容器）中的对齐。 两个值分别指定在块轴和行内轴中的 捕捉对齐，具体由捕捉容器的书写模式决定。 如果只指定一个值，则第二个值默认为相同值。

值定义如下：

none

此盒子在指定轴中不定义捕捉位置。

start

此盒子的滚动捕捉区域在滚动 容器的捕捉端口中的起始对齐为在指定轴上的捕捉位置。

end

此盒子的滚动捕捉区域在滚动 容器的捕捉端口中的结束对齐为在指定轴上的捕捉位置。

center

此盒子的滚动捕捉区域在滚动 容器的捕捉端口中的中心对齐为在指定轴上的捕捉位置。

起始和结束对齐是根据书写模式来解析的，除非滚动捕捉区域大于捕捉端口，此时会 强制设置起始为结束，反之亦然。

5.2.1. 限定有效捕捉位置到可见盒子

由于滚动捕捉的目的是在滚动区内对齐内容以获得最佳观看效果， 如果捕捉位置的滚动位置被认为有效，则捕捉到它将使贡献的捕捉区域完全位于捕捉端口之外，即使它满足所需的对齐， 捕捉区域也不算有效。

╔════viewport════╗┈┈┈┈┈┈┈┈┌──────────────┐
║  ┌─────┐ ┌──┐  ║        │ 顶部捕捉 │
║  ├──┐  │ └──┘  ║        │   元素    │
║  └──┴──┘       ║        │              │
╚════════════════╝        │              │
                          └──────────────┘

注意： 尽管scroll-snap-type: both 在每个轴中独立评估捕捉位置，在一个轴中选择捕捉位置可以受到另一个轴中捕捉位置的影响。 例如，一个轴上的捕捉可能会推动屏幕外的捕捉区域，使另一个轴原本要对齐的捕捉位置无效，从而无法选择。

5.2.2. 捕捉超出滚动端口的盒子

如果捕捉区域 在某个轴上的大小大于捕捉端口， 则在该轴上，任何使捕捉区域覆盖 捕捉端口的滚动位置， 以及几何上前后的捕捉位置之间的距离 大于该轴上捕捉端口的大小， 都是该轴上的有效捕捉位置。 用户代理可以将指定的对齐用作某些滚动操作（例如显式分页）的更精确目标。

┌─ 顶层部分 ─┐ ━┓
│                     │ 1┃
│                     │  ┃
│                     │ ━┩
│                     │  ┆
│                     │  ┆
│┌─── 子部分       ───┐│  ╯ ━┓
│└───────────────────┘│    2┃
│┌─── 子部分       ───┐│ ━┓  ┃
││                   ││ 3┃ ━┛
│└───────────────────┘│  ┃
│┌─── 子部分       ───┐│ ━┛ ━┓
│└───────────────────┘│    4┃
│┌─── 子部分       ───┐│ ━┓  ┃
││                   ││ 5┃ ━┛
││                   ││  ┃
││                   ││ ━┩
││                   ││  ┆
││                   ││  ┆
││                   ││  ┆
│└───────────────────┘│  ┆
└─────────────────────┘  ╯

5.2.3. 无法到达的快照位置

如果快照位置无法达到， 例如，必须将滚动容器的视口 滚动超过其可滚动溢出区域的边缘， 则该快照位置的使用位置 是在每个相关轴上朝向期望的快照位置尽可能多地滚动后得到的位置。

5.3. 滚动快照限制：scroll-snap-stop 属性

在有意的滚动方向上， 滚动容器可以“越过”几个可能的快照位置 （如果滚动操作以相同的方向但较小的距离进行， 这些位置都是有效的快照位置）， 然后到达滚动操作的自然终点并选择其最终的滚动位置。 scroll-snap-stop属性允许这样的可能快照位置“捕捉”滚动操作， 强制滚动容器在滚动操作自然结束之前停止。

值的定义如下：

normal

在执行滚动操作时， 滚动容器可以越过由该元素定义的快照位置。

always

在执行滚动操作时， 滚动容器必须不越过由该元素定义的快照位置； 它必须立即快照到该元素的第一个快照位置。

该属性对只有预期结束位置的滚动操作没有影响， 因为它们在概念上不会“越过”任何快照位置。

6. 捕捉机制

选择要捕捉到的捕捉位置的精确模型算法故意保持大部分未定义， 以便用户代理可以考虑复杂的用户意图和交互模型， 并随着时间的推移调整其响应方式， 以最佳方式服务用户。

本节定义了一些有用的概念，以帮助讨论滚动捕捉机制，并提供了有效滚动捕捉策略可能是什么样的指南。 鼓励用户代理适应这些指导，并在定义自己的捕捉行为时应用自己的最佳判断。 它还提供了一小部分行为要求，以确保作者在设计其接口时可以依赖的最低合理行为，以考虑滚动捕捉。

6.1. 滚动方法类型

当页面被滚动时，该动作是通过意图结束位置和/或意图方向来执行的。 这两者的每种组合定义了一种独特的滚动类别，可以稍微以不同的方式对待：

意图结束 位置

只有意图结束位置的滚动的常见示例包括：

• 没有动量释放的平移手势

• 显式操控滚动条“滑块”

• 通过API编程滚动，如scrollTo()

• 在文档的可聚焦元素之间切换

• 导航到页面内的锚点

• 诸如Home/End键的归位操作

意图方向和结束位置

具有意图方向和结束位置的滚动的常见示例包括：

• 被解释为具有动量的“抛掷”手势

• 通过API编程滚动，如scrollBy()

• 分页操作，如PgUp/PgDn键（或在滚动条上的等效操作）

在介入捕捉点等特性之前，滚动的意图终点是其自然终点。

意图 方向

只有意图方向的滚动的常见示例包括：

• 按下键盘上的箭头键（或在滚动条上的等效操作）

• 被解释为固定（而非惯性）滚动的滑动手势

此外，由于页面布局通常垂直和/或水平对齐事物，用户代理有时会在其方向足够垂直或水平时对滚动进行轴锁定。 轴锁定的滚动仅绑定在该轴上滚动。 这防止了精度较低的输入机制在非主要轴上漂移。

注意：本规范仅适用于用户代理支持的滚动方法； 它不要求用户代理支持任何特定的输入或滚动方法。

6.2. 选择快照位置

一个滚动容器可以在其快照区域中散布许多 可滚动溢出区域。一种选择快照位置的简单算法可能会产生用户直观上难以理解的行为， 因此在设计选择算法时需要谨慎。以下是一些可以帮助选择过程的指引：

• 快照位置应选择以最小化终点 （或自然终点） 和最终快照滚动位置之间的距离， 受到本节中列出的附加约束的影响。

• 如果滚动是轴锁定的， 则在滚动过程中应忽略另一个轴上的任何快照位置。 （不过，快照位置在另一个轴上仍然可以影响最终滚动位置。）

• 为了防止远离屏幕的元素对滚动位置产生难以理解的影响，应该忽略远离 快照位置， 如果它们的元素远离快照区域 定义的“走廊”， 或在仅具有预期方向的滚动方向上， 或在仅具有预期终点位置的滚动之后的快照区域。

• 用户代理必须确保用户可以“逃离”快照位置， 无论滚动方法如何。例如，如果快照类型为强制且下一个快照位置距离超过两个屏幕宽度， 一个简单的“始终快照到最近位置”选择算法可能会“困住”用户， 如果他们的终点位置距离只有一个屏幕宽度。 相反，一个更智能的算法，如果终点距离相对较小才返回到起始快照位置， 否则忽略起始快照位置， 这样会产生更好的行为。

  （这意味着仅具有预期方向的滚动必须始终忽略起始快照位置。）

• 如果页面导航到定义目标元素的片段 （例如，与:target匹配的元素， 或scrollIntoView()的目标）， 并且该元素定义了一些快照位置， 用户代理必须快照 到该元素的一个快照位置， 如果其最近的滚动容器是滚动快照容器。 用户代理也可以在滚动容器具有scroll-snap-type: none时执行此操作。

附录 A：长属性

物理和逻辑长属性（及其简写） 交互如在[CSS-LOGICAL-1]中定义。

滚动填充的物理长属性scroll-padding

这些长属性的scroll-padding指定 上、右、下和左边缘 的快照区域， 分别。 负值是无效的。

流相对长属性scroll-padding

这些长属性的scroll-padding指定 块开始、行开始、块结束和行结束边缘 的快照区域， 分别。 负值是无效的。

这些简写的scroll-padding-block-start + scroll-padding-block-end 和 scroll-padding-inline-start + scroll-padding-inline-end 是长属性的scroll-padding， 并指定块轴和行轴边缘的快照区域，分别。

如果指定两个值，第一个给出开始值 第二个给出结束值。

滚动边距的物理长属性scroll-margin

这些长属性的scroll-margin分别指定 上、右、下和左边缘的 滚动捕捉区域。

流相对长属性scroll-margin

这些长属性的scroll-margin分别指定 块开始、行开始、块结束和行结束边缘 的滚动捕捉区域。

这些简写的scroll-margin-block-start + scroll-margin-block-end 和 scroll-margin-inline-start + scroll-margin-inline-end 是长属性的scroll-margin， 并分别指定块轴和行轴边缘的 滚动捕捉区域。

如果指定两个值，第一个给出开始值 第二个给出结束值。

7. 隐私与安全注意事项

本规范并未暴露任何未直接暴露给DOM的信息； 它只是让滚动功能稍微更加实用。 没有新的隐私或安全注意事项。

8. 致谢

非常感谢 David Baron， Simon Fraser， Håkon Wium Lie， Theresa O’Connor， François Remy， Majid Valpour， 特别感谢Robert O’Callahan 他们的提案和建议已纳入本文件。

9. 变更

9.1. 自2019年3月19日候选推荐以来的变更

自2019年3月19日候选推荐以来的变更包括：

• 指定了用于解析scroll-snap-align的书写模式。 (问题3815)
• 定义了在多个元素重合时重新对齐的要求。 (问题4651)

  如果滚动容器在内容更改之前已被捕捉 并且相同的捕捉位置仍然存在 （例如其关联的元素未被删除）， 则内容更改后，滚动容器必须重新捕捉到相同的捕捉位置。 如果多个框在内容更改前已被捕捉，但它们的捕捉位置不再重合， 则如果其中一个获得焦点或成为目标， 滚动容器必须重新捕捉到该元素， 否则重新捕捉到哪个元素由UA定义。 （例如，UA可以跟踪在布局变化对齐和不对齐时捕捉到的元素， 以保持其他元素的捕捉位置。）

• 要求重新捕捉到新元素的操作像任何其他滚动到视图操作一样进行动画处理。 (问题4609)

  由于重新捕捉操作而需要滚动到新框的滚动 必须与任何其他滚动到视图的操作相同方式执行并动画化， 包括遵守scroll-behavior等控制。 然而，重新捕捉到之前相同框的滚动行为由UA定义。 例如，UA可以选择不对部分动态添加的内容滚动动画化， 以保持滚动的假象。

• 明确规定了scroll-snap-type和scroll-padding值 从根元素传播到文档视口的方式。 (问题3740)

  UA必须将根元素上设置的scroll-snap-type值应用到文档视口。 注意，与overflow不同，scroll-snap-type值不会从HTML的 body传播。

  UA必须将根元素上设置的scroll-padding 值应用到文档视口。 （注意，与overflow不同，scroll-padding值不会从HTML的 body传播。）

• 澄清了虽然捕捉对齐相对于视觉视口，但scroll-padding是相对于布局视口计算的， 以确保在根视口上scroll-padding和inset一致。 (问题4393)

  定义了从滚动端口对应边缘的向内偏移。 当应用于根视口时， 偏移是相对于布局视口计算和应用的 （而不是视觉视口）， 就像根视口上的inset属性应用于固定定位框一样； 最佳视区是与视觉视口相交的剩余区域。

• 更正了scroll-padding-inline 和 scroll-padding-block的“适用对象”行。 (问题5845)

已提供意见处理说明。

9.2. 自2019年1月31日候选推荐以来的变更

自2019年1月31日候选推荐以来的变更包括：

• 强调scroll-padding和scroll-margin在滚动捕捉关闭时仍然适用。 (问题3721)

  此外，为了更好地控制分页和滚动定位， 即使在捕捉关闭时， 本模块定义了scroll-padding 属性， 用于所有滚动容器， 调整滚动容器的最佳查看区域以用于分页和滚动进入视图操作； 类似地，scroll-margin属性可用于任何框 以调整其视觉区域， 用于滚动进入视图操作。

  该属性指定了 （适用于所有滚动容器，不仅限于滚动捕捉容器） 定义了滚动端口的最佳查看区域的偏移……

  如果页面导航到定义目标元素的片段 （例如匹配:target， 或者目标是scrollIntoView()）， UA 应该使用该元素的滚动捕捉区域， 而不仅仅是它的边框框， 来确定可滚动溢出区域中的哪一部分需要显示 ，即使捕捉关闭或未应用于此元素。

9.3. 自2018年8月14日候选推荐以来的变更

自2018年8月14日候选推荐以来的变更包括：

• 修正 scroll-padding的长手写形式，列表中包括新的auto关键字。 (问题3189)
• 修正了属性定义表中的“计算值”和“动画类型”行。
• 清理了<percentage>值在scroll-margin属性定义表中的混乱。 (问题3289)

提供了意见处理说明。

9.4. 自2017年12月14日候选推荐以来的变更

自2017年12月14日候选推荐以来的变更包括：

• 修正了scroll-snap-align 的速记形式，按照逻辑速记惯例 先指定块轴值，然后指定行轴值。 (问题2232)
• 在'scroll-padding'属性中添加了auto关键字作为初始值， 以考虑UA的启发式处理。 (问题2728)
• 在scroll-snap-type的定义中明确了像scrollTo() 这样的编程滚动也受捕捉影响。 (问题2593)

  使用相关scroll-snap-type属性 ，作者可以请求滚动端口在滚动操作后停留在某个捕捉位置 （包括像scrollTo() 方法这样的编程滚动）。

• 调整了§ 5.2.1 将有效捕捉位置限定为可见框中的措辞，以更清晰— 与旧版相比。 (问题2526)

提供了意见处理说明。

9.5. 自2017年8月24日候选推荐以来的变更

自2017年8月24日候选推荐以来的变更包括：

• :target/scrollIntoView()/等 应该考虑scroll-margin， 无论是否启用了滚动捕捉。 (问题 1)

  如果页面导航到定义了目标元素的片段 （例如匹配:target， 或目标是scrollIntoView()）， UA应使用该元素的滚动捕捉区域， 而不仅仅是其边框框， 来确定滚动到的可滚动溢出区域。

• :target/scrollIntoView()/等 必须（而不是应该） 使用捕捉位置，如果启用了滚动捕捉。 (问题 1)

  如果页面导航到定义了目标元素的片段 （例如匹配:target， 或目标是scrollIntoView()）， 并且该元素定义了一些捕捉位置， 则用户代理 应该 必须 捕捉到该元素的一个 捕捉位置 ，如果其最近的滚动容器是滚动捕捉容器。 用户代理可以在以下情况下执行此操作， 即使该滚动容器的scroll-snap-type: none。

• 将scroll-snap-margin重命名为scroll-margin， 以反映其在为滚动到元素提供呼吸空间时的更通用角色， 无论是否启用了滚动捕捉行为。 (问题 4)

提供了意见处理说明。

9.6. 自2016年10月20日候选推荐以来的变更

自2016年10月20日候选推荐以来的变更包括：

• 限制scroll-padding为非负值。 (问题 1084)

  值 必须为非负值，并且 解释方式与padding一致……

• 在§ 6.1 滚动方法的类型示例中添加分页和归位操作。 (问题 1605)
• 澄清了在一个轴上的捕捉可能会影响在另一个轴上是否可以捕捉到特定的捕捉区域。 (问题 950)

  虽然scroll-snap-type: both会分别在每个轴上评估捕捉位置，但在一个轴上选择的捕捉位置 可能会受到另一个轴上的捕捉位置的影响。 例如，在一个轴上进行捕捉 可能会将另一个轴上原本对齐的捕捉区域推到屏幕外， 使其捕捉位置无效，因此无法选择。

• 澄清了scroll-padding和scroll-margin简写 如何为其长写形式分配值。 (问题 1050)
• 澄清了滚动捕捉不要求任何特定的输入方式。 (问题 1305)

  本规范仅适用于用户代理支持的滚动方法； 它不要求用户代理支持任何特定的输入或滚动方法。

• 澄清了scroll-snap-stop对各种滚动操作的预期影响。 (问题 1552)
• 澄清了scroll-snap-stop应用于由该元素定义的捕捉位置， 而不是应用于滚动捕捉容器中所有的捕捉位置。
• 修正了示例中的一些语法错误，并在scroll-snap-type部分添加了一个新示例。 (问题 827)

提供了意见处理说明。