根本原因是滚动容器未被识别为可滚动上下文：必须设height: 100vh且overflow-y: scroll（非hidden/visible），scroll-snap-type不能写在body/html上，子项须显式设scroll-snap-align: start/center，移动端还需touch-action: pan-y且子项高度固定为100vh。
scroll-snap-type 为什么加了没反应
根本原因不是属性写错，而是滚动容器没被浏览器识别为“可滚动且可吸附”的上下文。常见现象是手指一划就滑过所有页面，停不住——这说明 scroll-snap-type 根本没启动。
- 父容器必须同时满足：
height: 100vh（或明确高度）、overflow-y: scroll（auto也可，但hidden或visible会失效） - 不能直接设在
body或html上：根元素滚动行为特殊，scroll-snap-type基本无效 - 子项（如
section）必须显式设置scroll-snap-align: start（或center），只靠容器设置毫无作用 - 避免用
margin-bottom分隔页面：会导致实际滚动距离 ≠ 视口高度，吸附位置偏移；改用min-height: 100vh+box-sizing: border-box
移动端全屏滚动失效的三个硬性条件
iOS Safari 和主流 Android WebView（Chrome 120+、Samsung Internet 24+）上，scroll-snap-type 要稳定生效，必须同时满足以下三点，缺一不可：
- 滚动容器加
touch-action: pan-y（横向轮播则用pan-x），否则系统可能拦截 touch 事件，绕过 snap 逻辑 - 滚动容器设
-webkit-overflow-scrolling: touch（仅 iOS 旧版必需；现代 iOS 已弃用，留着反而冲突，建议删掉） - 每个子项固定
height: 100vh（不能用min-height或 flex 撑高），并确保无transform、will-change干扰布局层
响应式下视口单位与 gap 的坑
用 grid 布局做全屏网格滚动时，启用 scroll-snap-type: y mandatory 后，若父容器设了 gap: 1rem，最后一行常被裁掉——浏览器会在最后一项后硬留一个 gap 高度，导致内容区域超出视口。
- 不建议删
gap，改用负外边距抵消：margin: -0.5rem（对应gap: 1rem） - 确保父容器没设
overflow: hidden或border，否则负 margin 会被裁剪 - 刘海屏/全面屏需加
scroll-padding-top: env(safe-area-inset-top)，否则 snap 锚点会上移 - 慎用
minmax(100vh, auto)+auto-fit：真实项目中极易因内容撑高或缩放导致高度失控，优先用固定height: 100vh
指示器同步和滚动监听别踩 scroll 事件
用 scroll 事件监听滚动位置再算当前页，既卡顿又不准——因为 scroll-snap 是浏览器原生截断行为，scrollTop 值在吸附过程中不可靠，快速滑动时还容易丢帧。
立即学习“前端免费学习笔记（深入）”；
- 唯一可靠方案是
IntersectionObserver，连 iOS Safari 11+ 都支持 - 观察器配置推荐：
{ threshold: 0.6 }（60% 可见时触发），避免上下页同时命中 - 给每页加唯一
id（如page-1），回调里用entry.isIntersecting判断是否真正进入视口 - 别在 observer 回调里直接调
scrollTo或改 DOM 类名，容易引发循环：滚动 → 触发 observer → 修改 → 再滚动
scroll-snap-align、touch-action、IntersectionObserver 和设备 DPR 缩放，在所有机型上节奏一致——稍有偏差，吸附就偏半屏，指示器就不同步。 
