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

概述`scroll-snap` 提供滚动时的捕捉与对齐能力，适合轮播、卡片列表与分页视图。容器声明捕捉模式与轴，子项声明对齐点。用法/示例.carousel { scroll-snap-type: x mandatory; overflow-x: auto; scroll-padding-inline: 16px; } .slide { scroll-snap-align: start; margin-inline: 16px } /* 纵向列表分页 */ .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_Snapweb.dev：Scroll snap — https://web.dev/articles/css-scroll-snap