布局更改后滚动捕捉
通过合集保持井井有条根据您的偏好保存内容并进行分类。

从 Chrome 81 开始，您不再需要添加事件监听器来强制重新捕捉。

Adam Argyle

Kaan Alsan

Yi Gu

CSS 滚动捕捉允许 Web 开发者通过声明滚动捕捉位置来创建良好控制的滚动体验。当前实现的一个缺点是，当布局更改时（例如，当视口大小调整或设备旋转时），滚动捕捉效果不佳。Chrome 81 中修复了此缺点。

互操作性

许多浏览器都对 CSS 滚动捕捉提供基本支持。有关更多信息，请参阅Can I use CSS Scroll Snap?（我可以使用 CSS 滚动捕捉吗？）。

Chrome 目前是唯一实现布局更改后滚动捕捉的浏览器。Firefox 有一个用于实现此功能的工单，Safari 也有一个用于在滚动器的内容更改后重新捕捉的开放工单。目前，您可以通过将以下代码添加到事件监听器来模拟此行为，以强制执行捕捉： javascript scroller.scrollBy(0,0); 但是，这不能保证滚动器捕捉回相同的元素。

背景

CSS 滚动捕捉

CSS 滚动捕捉功能允许 Web 开发者通过声明滚动捕捉位置来创建良好控制的滚动体验。这些位置确保可滚动内容与其容器正确对齐，以克服不精确滚动的问题。换句话说，滚动捕捉

防止滚动时出现笨拙的滚动位置。
创建分页浏览内容的效果。

分页文章和图片轮播是滚动捕捉的两个常见用例。

Example of CSS scroll snap. — CSS 滚动捕捉示例。在滚动结束时，图片的水平中心与滚动容器的水平中心对齐。

缺点

调整窗口大小时，捕捉位置会丢失。

滚动捕捉允许用户轻松浏览内容，但其无法适应内容和布局更改的特性阻碍了其部分潜在优势。如上面的示例所示，用户每次调整窗口大小时都必须重新调整滚动位置，才能找到之前捕捉的元素。导致布局更改的一些常见场景包括

调整窗口大小
旋转设备
打开 DevTools

前两种场景降低了 CSS 滚动捕捉对用户的吸引力，第三种场景是开发者在调试时的噩梦。开发者在尝试创建支持添加、删除或移动内容等操作的动态体验时，还需要考虑这些缺点。

对此的常见修复方法是添加监听器，这些监听器在发生任何上述布局更改时执行通过 JavaScript 进行的编程式滚动，以强制执行捕捉。当用户期望滚动器捕捉回与之前相同的内容时，此解决方法可能无效。任何进一步使用 JavaScript 进行的处理似乎几乎都违背了此 CSS 功能的目的。

Chrome 81 中内置支持布局更改后重新捕捉

在 Chrome 81 中，上述缺点已不复存在：即使在更改布局后，滚动器仍将保持捕捉状态。它们将在更改布局后重新评估滚动位置，并在必要时重新捕捉到最接近的捕捉位置。如果滚动器之前捕捉到布局更改后仍然存在的元素，则滚动器将尝试捕捉回该元素。请注意在以下示例中布局更改时会发生什么。

捕捉位置丢失

在 Chrome 80 中，旋转设备不会保留捕捉位置。滚动到显示 NOPE 的幻灯片并将设备方向从纵向更改为横向后，会显示一个空白屏幕，这表明滚动捕捉位置已丢失。

捕捉位置已保留

在 Chrome 81 中，旋转设备会保留捕捉位置。即使设备方向多次更改，显示 NOPE 的幻灯片仍保持在视图中。

有关更多详细信息，请参阅布局更改后重新捕捉规范。

示例：粘性滚动条

借助“布局更改后捕捉”，开发者可以使用几行 CSS 实现粘性滚动条

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

想要了解更多信息？请参阅以下演示聊天 UI 以获取视觉效果。

添加新消息会触发重新捕捉，使其在 Chrome 81 中粘附到底部。

未来工作

所有重新捕捉滚动效果目前都是即时的；一个潜在的后续工作是支持使用平滑滚动效果进行重新捕捉。有关详细信息，请参阅规范问题。

反馈

您的反馈对于改进布局更改后重新捕捉功能非常宝贵，因此请继续试用，并告知 Chromium 工程师您的想法。