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 属性指定 滚动容器是否为滚动捕捉容器、 它进行捕捉的严格程度， 以及考虑哪些轴。 如果未指定严格度值，则假定为 proximity。

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. 滚动快照严格性：无，接近，和强制 值

严格度 值（none、proximity、mandatory） 指定在滚动 容器上实施捕捉位置的严格程度（通过强制调整滚动位置）。 各值定义如下：

none

如果在滚动容器上指定， 则该滚动容器不得进行捕捉。

mandatory

如果在滚动容器上指定， 则当没有正在进行的滚动操作时，该滚动容器必须捕捉到某个捕捉位置。 如果存在有效的捕捉 位置， 则滚动容器必须在滚动 结束时捕捉 （如果不存在，则不会发生捕捉）。

proximity

如果在滚动容器上指定， 则该滚动容器可以在滚动结束时捕捉到某个捕捉位置， 具体由 UA 根据滚动参数自行决定。

作者使用强制捕捉位置时，应考虑 不同尺寸的屏幕以及（如适用）不同尺寸的内容。 特别是，尽管 UA 会处理对大于滚动口的已捕捉元素的访问， 但如果作者为不相邻的同级元素指定强制捕捉， 当中间内容比屏幕更长时， 这些内容可能会变得无法访问。

如果一个框是滚动 容器，或者其 scroll-snap-type 的值不是 none，则该框会捕获捕捉 位置。 如果一个框的包含块链上最近的、捕获捕捉位置的祖先是一个 滚动容器，且其 scroll-snap-type 值不是 none， 则该祖先就是此框的滚动捕捉容器。 否则，该框没有滚动捕捉容器， 并且其捕捉 位置不会触发捕捉。

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

表示滚动口对应边缘的偏移量 由 UA 确定。 通常其使用长度应默认为 0px， 但 UA 可以使用启发式规则检测非零值更为合适的情况。

例如， UA 可以检测 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

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

起始和结束对齐相对于捕捉容器的书写模式解析，除非滚动捕捉区域大于捕捉口， 在这种情况下，它们相对于 框自身的书写模式解析。 （这通常可使容器中的项目具有一致的捕捉对齐， 同时确保 start 始终对齐项目， 以便从头开始阅读其内容。）

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. 选择快照位置

一个滚动容器的整个可滚动溢出区域中可以散布许多捕捉区域。 选择捕捉位置的简单算法可能产生用户难以凭直觉理解的 行为， 因此在设计选择算法时需要谨慎。 以下是一些有助于选择过程的建议：

• 选择捕捉 位置时，应使终点 （或自然 终点） 与最终捕捉后的滚动位置之间的距离最小， 同时满足本节所列的其他约束。

• 如果滚动已锁定轴向， 则在滚动期间应忽略另一轴上的所有捕捉 位置。 （不过，另一轴上的捕捉位置仍可 影响最终滚动位置。）

• 为了防止远在屏幕之外的元素 对滚动位置产生难以理解的影响， 如果元素远在以下“走廊”之外，则应忽略其捕捉位置： 捕捉口 在可滚动溢出区域中移动时所划定的“走廊”， 或者仅具有预期方向的滚动在该方向上的假想“走廊”， 或者仅具有预期 结束位置的滚动结束后的捕捉口。

• 无论采用何种滚动方式，用户代理都必须确保用户能够“逃离”某个捕捉位置。 例如，如果捕捉类型为 mandatory，且下一个捕捉位置距离超过两个屏幕宽度， 当用户的结束位置仅相距一个屏幕宽度时， 简单的“始终捕捉到最近位置”选择算法可能会“困住”用户。 相反，更智能的算法只在终点与起始捕捉位置的距离相当小 时才返回该位置， 否则忽略起始捕捉位置， 这样会产生更好的行为。

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

• 如果页面导航到定义了目标元素的片段 （例如可由 :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）

提供了意见处理说明。