scroll-snap 本身无动画，需配合 scroll-behavior: smooth 或 JS 方法实现平滑滚动；仅对锚点跳转、scrollIntoView、scrollTo 生效，原生拖拽/滚轮/手指滑动无效；容器须设 overflow-y 及明确高度，子项必须声明 scroll-snap-align，移动端需加 touch-action 并注意 Safari 兼容性。
scroll-snap 本身不提供动画，别被“平滑”误导
加了 scroll-behavior: smooth 还没动画？不是写错了，是理解偏差。scroll-snap 只决定滚动停在哪，不控制怎么停；所谓“平滑滚动”必须靠 scroll-behavior: smooth 或 JS 的 scrollIntoView({ behavior: 'smooth' }) 触发，且仅对以下行为生效：
• 用户点击锚点链接（如 <a href="#slide2">）
• 调用 element.scrollIntoView()
• 调用 container.scrollTo()
对原生拖拽、滚轮、手指滑动——全部无效，停顿永远是瞬时的。
滚动容器必须“活”起来，否则 scroll-snap 彻底失效
常见现象：写了 scroll-snap-type: y mandatory，但滚动松手后根本不吸附。根本原因不是属性写错，而是容器没被浏览器识别为可滚动上下文：
• 必须设 overflow-y: scroll 或 overflow-y: auto（hidden 或 visible 会禁用 snap）
• 必须有明确高度，如 height: 100vh（不能靠内容撑开，也不能用 min-height 替代）
• 容器不能是 <body> 或 <html>，Safari 会静默忽略；改用包裹的 <div class="slider">
• 避免给容器加 transform、filter、position: fixed，这些会破坏 overflow 上下文
子项必须主动声明对齐方式，光靠父容器没用
scroll-snap-align 是子项属性，不是可选配置——它不声明，就等于没通电：
• 垂直全屏滚动用 scroll-snap-align: start（顶部对齐），最稳，兼容性最好
• 横向轮播也优先用 scroll-snap-align: start，而非 center（后者要求宽高严格匹配，稍有缩放或滚动条占位就偏移）
• 每个幻灯片都要单独设置，不能只写在父容器上
• 子项宽度/高度必须稳定：
– 推荐 flex: 0 0 100% + flex-shrink: 0（比 width: 100vw 更抗滚动条干扰）
– 禁止用 margin 分隔幻灯片，会导致实际可滚动距离 ≠ 视口尺寸，吸附点整体偏移
移动端真机测试时最容易忽略的三个点
iOS Safari 对 scroll-snap 的支持看似完整，但行为细节和桌面完全不同：
• 必须加 touch-action: pan-y（垂直）或 touch-action: pan-x（水平），否则系统手势识别会绕过 snap 逻辑
• -webkit-overflow-scrolling: touch 已废弃，现代 iOS 不仅不需要，留着反而可能冲突，建议直接删掉
• 快速滑动时容易跳过一屏，这不是 bug，是惯性滚动优先级高于吸附；可用 scroll-snap-stop: always（每个子项上）强制单步停驻，但注意目前仅 Chrome 支持较好，Safari 和 Firefox 仍不稳定
立即学习“前端免费学习笔记（深入）”；
