更改布局后滚动贴靠

从 Chrome 81 开始,您不再需要添加事件监听器来强制 重新抓取。

CSS 滚动紧贴 可让 Web 开发者通过在 ViewModel 中声明 滚动贴靠位置。当前实现的一个缺点是 当布局发生更改时(例如当视口处于 调整大小或旋转设备。此漏洞已在 Chrome 81 中修复。

互操作性

许多浏览器都提供对 CSS Scroll Snap 的基本支持。请参阅我可以使用 CSS 吗 滚动 Snap?

Chrome 是目前唯一能够在布局后实现滚动贴靠的浏览器 更改。Firefox 具有 机票开放时间为 Safari 也有一个开放的 在预订结束后重新拍照的 滚动条的内容发生更改。目前,您可以通过添加 事件监听器,以强制执行贴靠操作: javascript scroller.scrollBy(0,0); 不过,这并不能保证滚动条 元素。

背景

CSS 滚动紧贴

通过 CSS Scroll Snap 功能,网络开发者可以创建 通过声明滚动贴靠位置来获得滚动体验。这些位置 确保可滚动内容与其容器正确对齐 解决了滚动不精确的问题也就是说,滚动贴靠:

  • 防止滚动时不合适的滚动位置。
  • 制造分页浏览内容的效果。

分页文章和图片轮播是滚动的两种常见用例 快照。

<ph type="x-smartling-placeholder">
</ph> CSS 滚动贴靠的示例。
CSS 滚动贴靠的示例。末尾 滚动图片的水平中心与水平中心对齐 滚动容器的位置。

缺点

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
调整窗口大小时,贴靠位置会丢失。

滚动贴靠可让用户轻松浏览内容,但 无法适应内容和布局的变化,阻碍了其 优势。如示例所示 因此,无论何时调整窗口大小, 找到之前贴靠的元素。导致设置布局的一些常见场景 更改包括:

  • 调整窗口大小
  • 旋转设备
  • 打开开发者工具

前两种情况会降低 CSS Scroll Snap 对用户的吸引力, 第三个问题是开发者在调试时最可怕的开发者还需要 在尝试打造动态体验时,请考虑这些缺点 支持添加、移除或移动内容等操作。

一种常见的解决方法是添加监听器,以便通过 在上述任何布局发生时强制贴靠执行的 JavaScript 会发生哪些变化如果用户希望 即可快速回到之前相同的内容。任何进一步处理 JavaScript 似乎几乎违背了这项 CSS 功能的用途。

在 Chrome 81 中内置了对布局更改后的重新对齐支持

上述缺点在 Chrome 81 中不再存在:滚动条会保留下来 甚至在更改布局后也会被贴靠。它们将在以下时间过后重新评估滚动位置: 并视需要重新贴靠到最近的贴靠位置。如果 滚动条之前已贴靠到在滚动条后仍存在的元素 布局更改,滚动条将尝试重新贴靠到该滚动条上。请注意 当以下布局中的布局发生更改时,会发生什么? example

已丢失贴靠位置
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
在 Chrome 80 中,旋转设备不会保留贴靠位置。 滚动到显示 NOPE 的幻灯片并更改设备屏幕方向后 从纵向更改为横向,系统会显示一个空白屏幕,这表示 滚动贴靠位置丢失。
保留贴靠位置
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
在 Chrome 81 中,旋转设备确实会保留贴靠位置。用来 显示“NOPE”始终显示在画面中,即使设备屏幕方向发生多次变化也是如此。

请参阅在布局更改后重新贴靠 规范

示例:粘性滚动条

利用“在布局更改后贴靠”,开发者只需通过几个简单的 CSS 行:

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

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

希望了解更多信息?请观看下面的演示版聊天 界面

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
添加新讯息会触发重新截取功能,使它始终显示在底部 Chrome 81。

未来工作

目前,所有重新紧贴滚动效果都是即时的;可以采取的后续措施是 支持通过平滑滚动重新贴靠 效果。 请参阅规范问题 了解详情。

反馈

您的反馈对于改进布局更改后重新调整元素非常重要,欢迎继续 并亲自试用一下并让 Chromium 工程师 了解 想法。