scroll-snap-type 必须作用于显式可滚动容器，如设 height: 100vh、overflow-y: scroll 的 div；每个 section 需设 height: 100vh 与 scroll-snap-align: start；移动端需加 overscroll-behavior-y: contain 和 touch-action: pan-x；隐藏滚动条需分浏览器处理。
scroll-snap-type 必须作用在显式可滚动容器上，否则全屏滑动根本不会触发——这不是兼容性问题，是浏览器渲染机制决定的。
scroll-snap 容器必须显式可滚动
直接给 body 或 html 加 scroll-snap-type: y mandatory 几乎总失效，因为默认滚动由 html 承担，而它通常没有溢出内容（overflow-y 不触发），导致 snap 被忽略。
- 新建一个包裹所有
section的<div class="scroll-container"> - 给它设
height: 100vh（不能用min-height）、overflow-y: scroll、scroll-snap-type: y mandatory - 同时确保
html, body { margin: 0; padding: 0; height: 100%; }，避免外边距干扰尺寸计算
每个 section 必须有确定的停靠锚点
scroll-snap-align: start 不是“建议对齐”，而是强制停靠指令。如果浏览器无法确定停在哪，就会跳过 snap 或错位。
- 每个
section必须设height: 100vh（垂直滚动）或width: 100vw（水平滚动） - 必须配
scroll-snap-align: start（顶部对齐）或center（居中）；只写scroll-snap-align不加值无效 - 禁用
margin-top/margin-bottom，否则会改变offsetTop，视觉停靠位置偏移
移动端必须处理 overscroll 和 touch-action
iOS Safari 默认开启弹性回弹，滚动到底部时拉出空白再回弹，不仅破坏沉浸感，还会让 window.scrollY 返回异常值，干扰 JS 判断。
- 在滚动容器上加
overscroll-behavior-y: contain，彻底禁用纵向回弹 - 横向滚动（如相册）必须加
touch-action: pan-x，否则 iOS 默认锁死横向滑动 - 不要在滚动容器内监听
touchstart或touchmove，哪怕空回调也会触发 passive event warning，拖慢滚动帧率
隐藏滚动条要分浏览器写死
scroll-snap 容器的滚动条默认可见且占位，display: none 不可靠，仍可能造成内容轻微偏移。
立即学习“前端免费学习笔记（深入）”；
- Chrome/Edge：
.scroll-container::-webkit-scrollbar { display: none; } - Safari：
.scroll-container { scrollbar-width: none; }（仅 Firefox 支持）+ 实际需配合overflow: -webkit-scrollbarhack - 更稳妥的做法：用
padding-right: 0+overflow: hidden模拟隐藏，但需同步修正内容宽度
scroll-snap 就只是 CSS 里一行不生效的注释。 
