从 Chrome 81 开始,您无需再添加事件监听器来强制重新贴靠。
借助 CSS Scroll Snap,Web 开发者可以通过声明滚动贴靠位置打造可控的滚动体验。当前实现的一个缺点是,当布局发生变化时(例如当视口大小调整或设备旋转时),滚动贴靠功能无法正常运行。Chrome 81 中已解决此问题。
互操作性
许多浏览器都对 CSS Scroll Snap 提供基本支持。如需了解详情,请参阅我可以使用 CSS 滚动贴靠吗?。
Chrome 是目前唯一能在布局更改后实现滚动贴靠的浏览器。Firefox 有一个开放的工单用于实现此实现,Safari 也有一个开放的工单,用于在滚动条内容发生更改后重新拍摄。目前,您可以通过向事件监听器添加以下代码来强制执行贴靠,以模拟此行为:
javascript
scroller.scrollBy(0,0);
但是,这并不能保证滚动条会快速回到同一元素。
背景
CSS 滚动贴靠
借助 CSS Scroll Snap 功能,Web 开发者可以通过声明滚动贴靠位置来打造可控的滚动体验。这些位置可确保可滚动内容与其容器正确对齐,以克服滚动不精确的问题。换句话说,滚动贴靠:
- 防止滚动时不合理的滚动位置。
- 创建分页浏览内容的效果。
分页文章和图片轮播界面是滚动快照的两种常见用例。
![CSS 滚动贴靠示例。](https://web.developers.google.cn/static/articles/snap-after-layout/image/example-css-scroll-snap-b0e9b651c5dbf.png?authuser=5&hl=bg)
缺点
滚动贴靠功能可让用户轻松浏览内容,但其无法适应内容和布局的变化,会阻碍部分潜在优势。如上面的示例所示,每当调整窗口大小时,用户必须重新调整滚动位置,才能找到之前被贴靠的元素。导致布局更改的一些常见场景包括:
- 调整窗口大小
- 旋转设备
- 打开开发者工具
前两种情况使得 CSS Scroll Snap 对用户的吸引力不大,第三种是开发者在调试时做的噩梦。在尝试提供支持添加、移除或移动内容等操作的动态体验时,开发者也需要考虑这些缺点。
此问题的常见解决方法是添加通过 JavaScript 执行程序化滚动的监听器,以便在发生上述任何布局更改时强制执行贴靠操作。当用户希望滚动条能够快速恢复至与之前相同的内容时,此权宜解决方法可能无效。使用 JavaScript 进行任何进一步处理似乎几乎违背了这项 CSS 功能的目的。
Chrome 81 中内置了对布局更改后进行重新贴靠的支持
上述缺点在 Chrome 81 中已不复存在:即使在更改布局后,滚动条仍会保持贴靠状态。它们会在更改其布局后重新评估滚动位置,并在必要时重新贴靠到最近的贴靠位置。如果滚动条之前已贴靠到布局更改后仍然存在的元素,则滚动条会尝试重新贴靠到该元素。请留意以下示例中布局发生更改时会发生什么情况。
NOPE
的幻灯片并将设备屏幕方向从纵向更改为横向后,系统会显示一个空白屏幕,表示滚动贴靠位置丢失。
NOPE
的幻灯片仍会保留在视图中。
如需了解详情,请参阅在布局更改后重新贴靠规范。
示例:粘性滚动条
借助“布局更改后贴靠”功能,开发者可以通过几行 CSS 实现粘性滚动条:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
希望了解更多信息?请参阅以下演示版聊天界面,查看视觉效果。
后续工作
目前,所有重新贴靠滚动效果都是即时的;后续可能会支持通过流畅滚动效果进行重新贴靠。 如需了解详情,请参阅规范问题。
反馈
您的反馈对于在布局更改后更好地重新贴靠至关重要,因此请继续尝试并告知 Chromium 工程师您的想法。