更改布局后滚动贴靠

从 Chrome 81 开始,您无需再添加事件监听器即可强制重新捕获。

借助 CSS Scroll Snap,网络开发者可以通过声明滚动贴靠位置来打造可控的滚动体验。当前实现的一个缺点是,当布局发生变化时(例如当视口大小发生变化或设备旋转时),滚动贴靠功能无法正常工作。Chrome 81 已修复此缺点。

互操作性

许多浏览器都对 CSS 滚动捕获提供基本支持。如需了解详情,请参阅我可以使用 CSS 滚动贴靠功能吗?

目前,Chrome 是唯一在布局发生变化后实现滚动捕获的浏览器。Firefox 有一个打开的工单来实现此功能,Safari 也有一个开放的工单,用于在滚动条的内容发生更改后重新贴靠。目前,您可以通过向事件监听器添加以下代码来模拟此行为,以强制执行快速定位:javascript scroller.scrollBy(0,0);。不过,这并不能保证滚动条会快速定位回同一元素。

背景

CSS 滚动捕获

借助 CSS 滚动贴靠功能,Web 开发者可以通过声明滚动贴靠位置来打造精心控制的滚动体验。这些位置可确保可滚动内容与其容器正确对齐,从而克服滚动不精确的问题。换句话说,滚动捕获:

  • 防止滚动时不合适的滚动位置。
  • 创建翻页浏览内容的效果。

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

CSS 滚动贴靠示例。
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;
}

希望了解更多信息?如需查看可视化内容,请参阅以下演示聊天界面

在 Chrome 81 中,添加新消息会触发重新贴靠,使其固定到底部。

后续工作

目前,所有重新捕获滚动效果都是即时的;后续可能支持使用平滑滚动效果重新捕获。如需了解详情,请参阅规范问题

反馈

您的反馈对改进布局更改后的重新贴靠功能至关重要,因此请继续试用,并告知 Chromium 工程师您的想法。