---

title: CSS 滚动捕捉：Scroll Snap 的交互与性能

keywords:

• Scroll Snap
• 滚动捕捉
• 滑块
• 轮播
• 性能
• 可访问性

description: 介绍 CSS Scroll Snap 在滑块/轮播/分页滚动中的用法与参数，说明与惯性滚动与可访问性的协作，并给出性能注意与参考。

categories:

• 文章资讯
• 编程技术

---

概述

CSS Scroll Snap 提供原生的滚动捕捉行为，让滚动在接近指定位置时自动对齐，适合轮播、卡片列表与分页滚动。与惯性滚动和可访问性策略配合可获得更好的体验。

用法与参数

• 容器：scroll-snap-type: x mandatory（或 proximity）；
• 子项：scroll-snap-align: start|center|end；
• 偏移与停止：scroll-padding 设置内边距偏移；scroll-snap-stop: always 控制强制停靠［参考1,2］。

工程与可访问性

• 保持键盘与屏幕阅读器可达性；提供左右导航按钮与 aria 标签；在小屏不强制停靠以避免误操作。
• 与性能：避免复杂脚本滚动；结合被动监听与 touch-action 控制默认行为；减少布局重排。

参考与验证

• ［参考1］MDN 中文：Scroll Snap 概览与属性说明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_scroll_snap
• ［参考2］web.dev：Scroll Snap 实践与案例与可访问性注意：https://web.dev/articles/css-scroll-snap

关键词校验

关键词与 Scroll Snap 用法一致。