CSS 滚动吸附
CSS 滚动吸附模块所提供的属性可通过定义吸附位置控制滑屏和滚动行为。当用户在滚动容器中滚动溢出的内容时，内容可吸附至特定位置，由此提供分页和滚动定位效果。
此模块包含滚动容器的滚动内边距属性，用于调整滚入视野操作中分页的最佳可见区域。此模块还包含设置于滚动容器子元素的滚动外边距和滚动对齐方式属性，用于调整子元素在滚入视野时的可见区域，以及用于使滚动强制止于各子元素的属性。
滚动吸附实践
为在下方的框中查看滚动吸附，可在滚动式视口中上下左右地滚动经过含 45 个带编号盒子的网格。
在有滚动吸附时，所滚动的带编号盒子中的一者将吸附至指定位置。初始的 CSS 代码使带编号盒子吸附至视口中心，可使用滑块改变块向和行向的吸附位置。
使用吸附属性可允许或防止滚动越过某个元素（此示例中为带编号盒子）。可勾选“Prevent scrolling past boxes”使所有滚动操作被强制限于滚动至相邻盒子。
为比较滚动吸附与普通滚动，可勾选“disable snapping”并再次尝试滚动。
此示例的代码见 GitHub 上的源码。
参考
容器上的属性
子元素上的属性
指南
- CSS 滚动吸附的基本概念
-
CSS 滚动吸附特性的概览和示例。
相关概念
:target伪类- CSS 属性
overflow - Element
scroll()方法 - Element
scrollBy()方法 - Element
scrollIntoView()方法 - Element
scrollTo()方法 - Document
scroll事件 - ARIA 角色
scrollbar - 术语滚动容器
规范
| Specification |
|---|
| CSS Scroll Snap Module Level 1 |
| CSS Scroll Snap Module Level 2 |
参见
- CSS 溢出模块
- CSS 滚动条样式化模块
- 纯键盘滚动区域（载于 adrianroselli.com，2022 年）
- 滚动吸附示例（载于 Codepen，2022 年）
- 用 CSS 滚动吸附明确控制滚动（载于 web.dev，2021 年）
- 实用 CSS 滚动吸附（载于 CSS-Tricks，2020 年）
- CSS 滚动吸附（载于 12 Days of Web，2019 年）