scroll-snap-type 必须设在显式定义 overflow-y 和固定高度的直接滚动容器上，而非 body 或 html；需配合 scroll-snap-align: start、scroll-snap-stop: always、-webkit 前缀及扁平 dom 结构才能可靠生效。
scroll-snap-type 必须设在滚动容器上，不是 body
很多人直接给 body 或 html 加 scroll-snap-type，结果完全没反应——因为浏览器默认禁止对根元素启用滚动捕捉（尤其在移动端），且 body 的滚动行为常被用户代理样式覆盖。真正起作用的必须是显式设置了 overflow-y: scroll（或 auto）且有固定高度的**直接滚动容器**。
实操建议：
- 用一个包裹全屏区块的
<div class="scroll-container"> 作为滚动上下文，设 <code>height: 100vh、overflow-y: scroll、-webkit-overflow-scrolling: touch（iOS 平滑滚动） -
scroll-snap-type写在该容器上，值推荐y mandatory（垂直方向强制捕捉） - 确保子区块（如
.section）设scroll-snap-align: start，且每个高度为100vh（或使用min-height: 100vh防内容撑高） - 给每个可停靠的子区块（如
.section）加上scroll-snap-stop: always，强制每次滑动至少停一次 - 确认父容器没有 margin/padding/border 导致实际高度 ≠ 100vh；用
box-sizing: border-box避免意外溢出 - 避免子区块用
flex或grid布局后内部再伸缩，这会干扰scroll-snap-align的基准位置 -
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">中user-scalable=no非必需，但maximum-scale=1.0可防止双击缩放干扰滚动流 - 滚动容器必须加
-webkit-scroll-snap-type: y mandatory和-webkit-scroll-snap-points-y: repeat(100vh)（旧版 Safari 兼容写法） - 禁用
touch-action: pan-y可能导致手势冲突，不要随意加；如需阻止横向拖拽，用touch-action: none+ JS 监听更稳妥 - 结构扁平化：滚动容器 →
.section（不要套多余 wrapper） - 避免在
.section上使用transform、filter、opacity ；如需动效，改用 <code>top/margin-top或 CSS 自定义属性驱动的clip-path - 调试时临时加
outline: 2px solid red到滚动容器和每个.section，肉眼确认尺寸与嵌套关系
滚动卡顿或跳过某一页？检查 scroll-snap-stop 和父容器尺寸
当快速滑动时，某些页面被跳过，或松手后回弹不精准，大概率是 scroll-snap-stop 缺失或容器尺寸计算异常。这个属性控制是否允许“越过”某个捕捉点，现代浏览器支持但仍易被忽略。
实操建议：
移动端 Safari 不生效？补全 -webkit- 前缀和 viewport 设置
iOS 15+ 虽已原生支持 scroll-snap-type，但若未正确设置 viewport 或缺少前缀，仍会退化为普通滚动。这不是 bug，而是 Safari 对滚动优化的保守策略。
实操建议：
scroll-snap-align 不生效？确认元素是直接子元素且无 transform 干扰
scroll-snap-align 只对**滚动容器的直接子元素**有效。如果中间嵌了 <div><section></section></div>，那 <section></section> 就不算“直接子元素”，捕捉失效。另外，任何 transform（包括 translateZ(0) 强制硬件加速）都会创建新的层叠上下文，使 scroll snap 基准偏移。
实操建议：
滚动捕捉看似简单，但真实项目里最常栽在“以为设了就完事”的错觉上——它极度依赖 DOM 结构干净、尺寸精确、前缀完整。尤其是 iOS 上，少一个 -webkit- 或多一个 transform，整套就静默失效。
