直接用 scroll-snap-type + scroll-snap-align 可实现全屏翻页，但需满足四要素：overflow-y: scroll、height: 100vh、子项 scroll-snap-align: start、touch-action: pan-y，缺一不可。
直接用 scroll-snap-type + scroll-snap-align 就能实现接近原生体验的全屏上下翻页，但默认行为在 iOS Safari 和部分安卓 WebView 中容易卡顿或跳过页面，必须配合特定布局约束和滚动容器修正。
滚动容器必须设 overflow-y: scroll 且禁用 overflow-x
很多开发者用 overflow: auto 或 overflow: scroll，结果在 iOS 上失效——Safari 要求明确指定 overflow-y 才触发 scroll snap。同时，overflow-x 必须显式设为 hidden，否则横向滚动干扰 snap 判定。
- 别写
overflow: scroll，要写overflow-y: scroll; overflow-x: hidden - 容器不能是
body或html：根元素滚动行为被 UA 样式限制，必须用包裹层（如.scroll-container） - 避免
transform、filter、will-change: transform等属性，旧版 WebKit 会跳过 snap 计算
每个页面区块必须严格等于容器高度
抖音式翻页本质是「每页强制对齐顶部」，所以所有子项统一用 scroll-snap-align: start。关键点在于：每个区块必须严格等于容器高度（含 border/padding 影响），否则 snap 目标错位。
- 推荐用
height: 100vh，不用min-height: 100vh（内容撑高会破坏吸附） - 若区块内有固定 header/footer，需从
100vh中减去它们的高度，例如height: calc(100vh - 60px) - 移动端必须用
vh，不用100%（地址栏展开/收起时会跳变） - 加
scroll-snap-stop: always到每个子项，防止快速滑动跳过两页
iOS 和微信 X5 内核的兼容性补救
iOS 15.4 是首个稳定支持 scroll-snap-type 的版本，之前版本即使写了也无效果。单纯靠 CSS 会白屏或滚动失控，必须降级处理。
- 真机测试时连 Safari Web Inspector，看 Timeline 是否触发
ScrollStart/ScrollEnd，而不是只靠视觉判断 - iOS 15.4 以下建议禁用 snap，回退到 JS 驱动：监听
scroll，用getBoundingClientRect().top计算偏移，阈值判断后调用scrollIntoView({ block: 'start', behavior: 'smooth' }) - 务必节流处理，否则频繁触发
scrollIntoView会导致二次跳动 -
-webkit-overflow-scrolling: touch在 iOS 15+ 已非必需，留着反而可能冲突，建议删掉
移动端必须加 touch-action: pan-y
iOS Safari 和 Android Chrome 默认拦截 touch 事件以优化手势识别，不显式放开就会绕过 snap 逻辑。
- 横向轮播用
touch-action: pan-x，纵向全屏滚动必须用touch-action: pan-y - 别写
pan-y pinch-zoom等多值组合，部分 WebView 中会干扰双指缩放 - 禁用弹性回弹：
overscroll-behavior: contain，防止滚到底触发下拉刷新 - 不要依赖
scroll-behavior: smooth，它在 Safari 对 snap 无效，且无法控制减速曲线
最容易被忽略的是：滚动容器是否真正“可滚动”——不是写了 scroll-snap-type 就万事大吉，而是要同时满足 overflow-y: scroll、height: 100vh、scroll-snap-align 子项、touch-action 四者缺一不可。真机连 Safari 开发者工具验证 ScrollEnd 事件是否触发，比肉眼观察可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
