scroll-snap 有效需满足三条件：容器设 height: 100vh、overflow-y: scroll、scroll-snap-type: y mandatory；子项须设 scroll-snap-align: start 和 height: 100vh；移动端加 touch-action: pan-y；禁用 transform 等干扰属性。
直接给 body 或 html 加 scroll-snap-type 无效，必须用独立容器、显式设 overflow-y: scroll 和 height: 100vh，否则滚动根本不会吸附。
滚动容器必须满足三个硬性条件
浏览器只对同时满足以下三点的容器启用 scroll snap：
-
height: 100vh（不能用min-height或靠内容撑高） -
overflow-y: scroll（overflow: auto可用，但hidden或visible会彻底禁用吸附） -
scroll-snap-type: y mandatory（写在该容器上，不是body）
常见错误是把所有样式堆在 body 上——UA 样式和系统策略会绕过 snap 计算。真机测试时若 Timeline 不触发 ScrollStart/ScrollEnd，说明容器根本没“活”起来。
每个子项必须声明 scroll-snap-align 并固定高度
scroll-snap-type 是开关，scroll-snap-align 才是锚点。没它，mandatory 也白搭：
- 全屏垂直滚动统一用
scroll-snap-align: start（顶部对齐），别用center——除非你精确控制了容器与子项高度比 - 子项高度必须是
height: 100vh，不是min-height: 100vh；内容超长时加overflow: hidden或内部滚动，否则吸附基准偏移 - 禁止用
margin-bottom分隔子项——会导致可滚动距离 ≠ 视口高度，松手后卡在两页之间；改用box-sizing: border-box+padding-bottom或负外边距抵消
移动端必须加 touch-action: pan-y
iOS Safari 和 Android Chrome 120+ 默认拦截 touch 事件以优化手势识别，不显式放开就会绕过 snap 逻辑：
- 横向轮播用
touch-action: pan-x，纵向全屏用touch-action: pan-y - 不要写
pan-y pinch-zoom等多值组合——部分 WebView 会因此干扰双指缩放，导致滑动卡顿 -
-webkit-overflow-scrolling: touch已废弃，现代 iOS 不仅不需要，留着还可能冲突，建议删掉
JS 控制切换时别手动算 scrollLeft / scrollTop
直接赋值 container.scrollTop = x 在高 DPI 屏、缩放页面或 Safari 下极易失步——计算出的像素和实际 snap 点对不上：
- 改用
slideEl.scrollIntoView({ block: 'nearest', inline: 'start' })，它会尊重当前 scroll snap 配置 - 监听
scrollend（Chrome 112+、Safari 16.4+ 支持）做补偿，比监听scroll更可靠；旧版降级用IntersectionObserver，rootMargin设为'0px 0px -50% 0px'提升触发精度 - 避免在滚动容器父层用
transform、will-change或position: fixed，旧版 WebKit 会跳过 snap 计算
最易被忽略的是：子项高度是否真的等于容器视口高度——刘海屏需加 scroll-padding-top: env(safe-area-inset-top)，否则吸附点会上移；微信 X5 内核仍需 JS 降级兜底，不能只依赖 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
