从 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">![CSS 滚动贴靠的示例。](https://web.developers.google.cn/static/articles/snap-after-layout/image/example-css-scroll-snap-b0e9b651c5dbf.png?authuser=9&hl=da)
缺点
<ph type="x-smartling-placeholder">滚动贴靠可让用户轻松浏览内容,但 无法适应内容和布局的变化,阻碍了其 优势。如示例所示 因此,无论何时调整窗口大小, 找到之前贴靠的元素。导致设置布局的一些常见场景 更改包括:
- 调整窗口大小
- 旋转设备
- 打开开发者工具
前两种情况会降低 CSS Scroll Snap 对用户的吸引力, 第三个问题是开发者在调试时最可怕的开发者还需要 在尝试打造动态体验时,请考虑这些缺点 支持添加、移除或移动内容等操作。
一种常见的解决方法是添加监听器,以便通过 在上述任何布局发生时强制贴靠执行的 JavaScript 会发生哪些变化如果用户希望 即可快速回到之前相同的内容。任何进一步处理 JavaScript 似乎几乎违背了这项 CSS 功能的用途。
在 Chrome 81 中内置了对布局更改后的重新对齐支持
上述缺点在 Chrome 81 中不再存在:滚动条会保留下来 甚至在更改布局后也会被贴靠。它们将在以下时间过后重新评估滚动位置: 并视需要重新贴靠到最近的贴靠位置。如果 滚动条之前已贴靠到在滚动条后仍存在的元素 布局更改,滚动条将尝试重新贴靠到该滚动条上。请注意 当以下布局中的布局发生更改时,会发生什么? example。
NOPE
的幻灯片并更改设备屏幕方向后
从纵向更改为横向,系统会显示一个空白屏幕,这表示
滚动贴靠位置丢失。
NOPE
”始终显示在画面中,即使设备屏幕方向发生多次变化也是如此。
请参阅在布局更改后重新贴靠 规范 。
示例:粘性滚动条
利用“在布局更改后贴靠”,开发者只需通过几个简单的 CSS 行:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
希望了解更多信息?请观看下面的演示版聊天 界面。
<ph type="x-smartling-placeholder">未来工作
目前,所有重新紧贴滚动效果都是即时的;可以采取的后续措施是 支持通过平滑滚动重新贴靠 效果。 请参阅规范问题 了解详情。
反馈
您的反馈对于改进布局更改后重新调整元素非常重要,欢迎继续 并亲自试用一下并让 Chromium 工程师 了解 想法。