scroll-snap-type在移动端不生效的根本原因是滚动容器未激活：缺overflow-y: scroll、子项无scroll-snap-align、未加touch-action: pan-y。
scroll-snap-type 在移动端不生效，不是属性写错了，而是滚动容器压根没“活”起来——缺可滚动上下文、缺吸附锚点、缺 touch-action 松绑。
为什么加了 scroll-snap-type 却完全不吸附
常见现象是手指一划就滑过所有页面，松手后停在中间或直接滚到底。这不是兼容性问题，而是 scroll snap 的启动条件被卡死了：
- 父容器没设
overflow-y: scroll（或auto），仅靠height: 100vh不构成可滚动上下文 - 子项没设
scroll-snap-align: start（纵向）或center（横向），光有容器设置无效 - 子项总高度/宽度未超过容器尺寸（比如只有一屏内容却开了滚动），浏览器判定“无需滚动”，直接跳过 snap 逻辑
- 用了
transform、will-change: transform或position: fixed等属性，iOS WebKit 会绕过 snap 计算
移动端必须加的三行 CSS
iOS Safari 14+、Android Chrome 120+ 实测稳定生效的最小组合：
.scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
touch-action: pan-y; /* 关键！否则 iOS 默认禁用 touch 下的 snap */
}
<p>.scroll-section {
height: 100vh;
scroll-snap-align: start;
}
</p>
注意：-webkit-overflow-scrolling: touch 已废弃，加了反而可能破坏吸附；scroll-behavior: smooth 在 iOS Safari 完全无效，别依赖它。
横向轮播（如相册）的特殊处理
横向全屏滚动比纵向更易失效，尤其在 iOS 上出现“拖不动”“松手回弹”“卡在两页之间”：
- 外层容器必须设
display: flex或white-space: nowrap，防止子项折行 - 子项用
flex: 0 0 100%比width: 100vw更稳——后者受滚动条占位、缩放、padding 影响易错位 - 必须加
touch-action: pan-x到容器上，不能写pan-x pinch-zoom，后者会干扰双指缩放 - 禁用弹性回弹：
overscroll-behavior-x: contain
容易被忽略的细节和真机调试要点
很多问题只在真机上暴露，模拟器或桌面 DevTools 看不出：
- 别用
min-height: 100vh做子项高度——内容超长时会撑开，破坏吸附位置；要用height: 100vh+overflow: hidden或scroll控制 - IntersectionObserver 监听当前页时，
rootMargin设为'0px 0px -50% 0px'，让触发点落在视口垂直中线，避免上下页同时命中 - 测试时连 Safari Web Inspector，看 Timeline 是否频繁触发 Layout——若有，大概率是某处无意调用了
offsetWidth或getBoundingClientRect() - 所有
scroll-snap-align必须写在子项上，且不能被scroll-snap-type: none覆盖（比如子项内嵌了另一个滚动区，记得重置）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
