scroll-snap-type在移动端不生效的主因是容器未激活滚动上下文，尤其height: 100vh在safari中因地址栏变化导致高度失准，使容器无法触发滚动，进而使snap失效。
scroll-snap-type 在移动端不生效？先看容器 height 是否被 100vh 锁死
很多开发者写完 scroll-snap-type: y mandatory，在 iOS Safari 或部分安卓 WebView 里一滑就跳过所有区块——根本原因不是属性写错，而是滚动容器压根没“活”起来。而最隐蔽的罪魁祸首，就是用 height: 100vh 强制设高。
它在缩放、地址栏收起/展开、横屏切换等场景下会失准：Safari 的 100vh 在地址栏隐藏时仍按原始视口算，导致容器实际高度 浏览器判定“无需滚动”，直接忽略全部 snap 规则。
- 改用
min-height: 100dvh（推荐）：它是动态视口单位，能响应地址栏变化；但注意 iOS 15.4 之前不支持 - 退而求其次用
min-height: 100vh+overflow-y: auto：确保即使高度不足，也能触发滚动上下文 - 绝对避免
height: 100vh+overflow: hidden组合：这等于主动关闭滚动能力
子项宽度/高度没撑开？scroll-snap-align 就是摆设
scroll-snap-align 不是魔法开关，它只对“已参与布局且尺寸明确”的子元素起作用。移动端常见失效场景是子项被 flex 或 grid 压缩变形，导致浏览器无法计算吸附锚点。
- 横向轮播：子项别用
width: 100vw，受滚动条宽度、缩放影响大；改用flex: 0 0 100%或width: 100%+flex-shrink: 0 - 垂直全屏：每个子项必须有明确高度，比如
min-height: 100dvh；若依赖内容撑高，图片未加载完或字体未就绪时，snap 区域不会注册 - 别给子项加
transform（如translateY）：旧版 WebKit 会跳过 snap 计算，直接忽略
移动端 touch 滚动跳帧、停不准？缺了 touch-action
iOS Safari 和部分安卓 WebView 对手势滚动的 snap 响应策略不同。手指快速甩动时，常直接跳到第 3 项，漏掉第 2 项——这不是性能问题，是浏览器没把 touch 事件交给 scroll snap 引擎处理。
- 必须给滚动容器加
touch-action: pan-x（横向）或touch-action: pan-y（纵向），否则系统可能拦截 touch 事件、绕过 snap 逻辑 - 禁用已废弃的
-webkit-overflow-scrolling: touch；改用will-change: scroll-position提示渲染优化 - 避免外层套
position: fixed或will-change: transform：它们会创建新层叠上下文，干扰 snap 区域识别
动态插入子项后 snap 失效？不是 JS 问题，是 layout 还没完成
React/Vue 中通过 state 插入新子项后，DOM 虽已挂载，但 scroll-snap 引擎未必立即重注册吸附区域——尤其当新元素还没完成 layout（比如图片未加载完、字体未就绪、CSS 变量未计算）。
- 不要依赖
useEffect或mounted立即触发scrollIntoView；可监听load事件或用ResizeObserver等待尺寸稳定 - 图片建议加
loading="eager"或预设宽高，避免 layout shift 导致 snap 区域错位 - 极端情况可手动触发重计算：临时修改容器
scroll-snap-type值再设回原值（如从y mandatory→none→y mandatory）
真正麻烦的从来不是写对那几行 CSS，而是滚动容器是否在浏览器眼里“真实存在”——它得有正确的尺寸、明确的方向、未被拦截的事件流，还得等 layout 完成才能被 snap 引擎看见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
