CSS 滚动捕捉

CSS 滚动捕捉 模块提供了一些属性，这些属性允许您通过定义捕捉位置来控制平移和滚动行为。当用户在滚动容器内滚动溢出的内容时，内容可以捕捉到指定位置，从而提供分页和滚动定位功能。

此模块包含滚动容器的 scroll-padding 属性，用于在滚动到视图操作期间调整最佳分页查看区域。它还包含在滚动容器子元素上设置的 scroll-margin 和 scroll-alignment，以调整子元素的视觉区域，当该子元素滚动到视图中时，以及一个属性强制滚动在单个子元素上停止。

滚动捕捉的实际应用

要查看下面框中的滚动捕捉，请在可滚动视窗中上下左右滚动 45 个编号框的网格。

使用滚动捕捉，您滚动到的编号框之一将捕捉到指定位置。初始 CSS 使编号框捕捉到视窗的中心。使用滑块更改块级和内联捕捉位置。

使用捕捉属性，您可以允许或阻止滚动超过元素，本例中的编号框。选中“阻止滚动超过框”复选框以强制所有滚动操作仅限于滚动到相邻框。

要将滚动捕捉与普通滚动进行比较，请选中“禁用捕捉”复选框，然后尝试再次滚动。

要查看此示例的代码，请在 GitHub 上查看源代码。

参考资料

容器上的属性

子元素上的属性

指南

CSS 滚动捕捉的基本概念: CSS 滚动捕捉功能的概述和示例。

相关概念

:target 伪类
overflow CSS 属性
元素 scroll() 方法
元素 scrollBy() 方法
元素 scrollIntoView() 方法
元素 scrollTo() 方法
文档 scroll 事件
scrollbar ARIA 角色
滚动容器词汇表术语

规范

规范
CSS 滚动捕捉模块级别 1

另请参阅

CSS 溢出模块
CSS 滚动条样式模块
仅键盘滚动区域在 adrianroselli.com 上 (2022)
滚动捕捉示例在 Codepen 上 (2022)
使用 CSS 滚动捕捉进行良好控制的滚动在 web.dev 上 (2021)
实用的 CSS 滚动捕捉/ 在 CSS-Tricks 上 (2020)
CSS 滚动捕捉在 12 Days of Web 上 (2019)