scroll-snap-type 必须设在显式设置 overflow-y: auto/scroll 且 height: 100vh 的滚动容器上，而非 body；分屏元素需设 scroll-snap-align: center，容器设 scroll-snap-type: y mandatory，并加 -webkit 前缀以兼容 safari。
scroll-snap-type 必须设在滚动容器上，不是 body
很多人一上来就给 body 或 html 加 scroll-snap-type: y mandatory，结果完全没反应——因为 scroll-snap 只对「有滚动行为的直接容器」生效。全屏分屏滚动必须用一个明确的、带 overflow-y: auto（或 scroll）的包裹元素，比如 <main class="snap-container"></main>。
常见错误现象：scroll-snap 不触发、滑动后不吸附、快速拖拽时跳过目标区域。
- 滚动容器需显式设置
height: 100vh（或固定高度），且overflow-y: scroll -
scroll-snap-type要写在该容器上，不能写在body上（body的滚动被浏览器接管，不受 CSS snap 控制） - 若用
min-height: 100vh，需确保内容撑开容器，否则 snap 区域可能失效
每个分屏区域必须设 scroll-snap-align，且用 block 而非 start
分屏区域（如 <section></section>）要吸附到视口顶部，得设 scroll-snap-align: start ——但这里有个关键陷阱：start 是相对于书写方向的起始边，在竖排文档里会出错。实际项目中一律用 scroll-snap-align: center 或更稳妥的 scroll-snap-align: end 配合 scroll-snap-type: y mandatory，但最通用、兼容性最好的写法是：
- 每个分屏元素设
scroll-snap-align: center，同时容器设scroll-snap-type: y mandatory - 若要求严格顶部对齐（如导航锚点精准停靠），用
scroll-snap-align: start，但必须确认容器scroll-padding-top为 0，否则会被 offset 干扰 - 避免混用
scroll-snap-align: start和scroll-snap-align: end在同一容器内，会导致吸附逻辑冲突
移动端 Safari 的 scroll-snap 表现不稳定，需加 -webkit 前缀和兜底
iOS 14+ 支持 scroll-snap，但 Safari 对 mandatory 的实现有延迟，快速滑动时常卡在两个区域中间。这不是 bug，是浏览器策略：它优先保证流畅性，降低强制吸附强度。
- 必须加
-webkit-scroll-snap-type: y mandatory和-webkit-scroll-snap-align: center - 给滚动容器加
scroll-behavior: smooth可缓解突兀感，但不能替代 snap - 真机测试时发现吸附失效？检查是否启用了
overscroll-behavior: contain——它会禁用 snap 的惯性吸附 - 极端情况可监听
scrollend事件做手动矫正（但会破坏原生性能，仅作 fallback）
滚动区域外溢、内容被截断？检查 scroll-padding 和 box-sizing
分屏区域底部被切掉、标题文字看不见，大概率是 scroll-padding 设置不当，或者子元素 margin / padding 撑开了容器。
-
scroll-padding-top默认为 0，如果页面有固定 header，应设为 header 高度（如scroll-padding-top: 64px） - 所有分屏元素必须设
box-sizing: border-box，否则padding或border会让实际高度 >100vh，导致 snap 错位 - 避免在分屏内部用
position: sticky顶栏——它会干扰 snap 容器的滚动边界计算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
