CSS scroll-snap：滚动捕捉与分页体验

## 概述 `scroll-snap` 提供滚动时的捕捉与对齐能力，适合轮播、卡片列表与分页视图。容器声明捕捉模式与轴，子项声明对齐点。 ## 用法/示例 ```css .carousel { scroll-snap-type: x mandatory; overflow-x: auto; scroll-padding-inline: 16px; } .slide { scroll-snap-align: start; margin-inline: 16px } ``` ```css /* 纵向列表分页 */ .list { scroll-snap-type: y proximity } .item { scroll-snap-align: center } ``` ## 工程建议 - 结合 `scroll-padding` 与 `scroll-margin` 控制捕捉边界，避免遮挡固定头部。 - 在触控设备验证回弹与惯性，选择 `mandatory` 与 `proximity` 的合适策略。 - 为可访问性提供键盘导航与焦点管理，避免仅依赖手势。 ## 参考与验证 - MDN：Scroll snap — https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap - web.dev：Scroll snap — https://web.dev/articles/css-scroll-snap