scroll-snap-type必须设在显式设置overflow和高度的块级滚动容器上，而非body或html；需配合scroll-snap-align、内容溢出及overscroll-behavior等条件才能生效。
scroll-snap-type 必须作用在滚动容器上，不是 body
很多人直接给 body 或 html 加 scroll-snap-type，结果完全没反应——因为浏览器默认对 body 的滚动做了特殊处理，scroll-snap-type 在这里被忽略。必须用一个明确的、有滚动行为的块级容器（比如 div），并手动设置 overflow-y: scroll 和 height（或 max-height）。
常见错误现象：scroll-snap-type: y mandatory 写在 body 上，滚动时无吸附；检查 computed styles 会发现 snap 属性根本没生效。
- 滚动容器需显式设置
height: 100vh（或100dvh更稳妥） - 必须同时设
overflow-y: scroll（不能只靠页面自然滚动） - 推荐用
100dvh替代100vh，避免 iOS Safari 地址栏收缩导致高度跳变 - 容器内子元素（分区）需设
scroll-snap-align: start，且每个分区高度至少为容器高度
分区元素必须满足 scroll-snap-align + 尺寸约束
即使容器设置了 scroll-snap-type，如果子元素没配对设置 scroll-snap-align，或者高度不够，吸附也会失效。尤其注意：Firefox 对 scroll-snap-align 的解析更严格，不支持 center 在全屏场景下的可靠吸附，start 是最稳妥的选择。
使用场景：每个分区是独立的 section，希望用户滚动停在顶部对齐位置。
- 每个分区加
scroll-snap-align: start - 每个分区高度设为
min-height: 100dvh（不能只用height，否则内容超长时会撑开破坏吸附） - 避免给分区设
margin或padding-top，它们会干扰 snap 基准线 - 若需居中文字，用
display: flex; align-items: center，别靠padding-top模拟
mandatory 和 proximity 的实际差异远比文档写的明显
scroll-snap-type: y mandatory 表示滚动必须停在最近的 snap point，哪怕用户只是轻扫一下；而 proximity 只在靠近时才触发吸附，松手后可能继续惯性滚动——这对全屏导航来说几乎不可用。
性能影响：在低端 Android 设备上，mandatory 可能导致滚动卡顿，尤其是分区里有大量 DOM 或未优化图片时。
- 生产环境优先用
mandatory，proximity仅用于调试或过渡效果测试 - Chrome 和 Safari 支持良好；Firefox 需要确保父容器有明确
contain: layout或will-change: transform才更稳定 - iOS Safari 16.4+ 修复了部分
mandatory轻扫不吸附的问题，但旧版本仍建议加scroll-behavior: smooth辅助
移动端 touch 滚动常因 overscroll-behavior 失效
在 iOS 和部分 Android 浏览器中，滚动到底部再拖拽会触发“弹性回弹”，这个过程会绕过 scroll-snap 逻辑，导致吸附中断或错位。这不是 bug，而是浏览器对 overscroll 的默认行为覆盖了 snap 控制。
解决方式非常具体：在滚动容器上加 overscroll-behavior-y: contain，禁止弹性回弹传播到外层。
- 必须写在滚动容器上（不是分区，也不是 body）
-
contain表示阻止传播且不触发任何回弹；none会阻止传播但可能触发空白页回弹 - 配合
scroll-snap-stop: always（加在分区上）可进一步减少快速滚动时的跳过现象 - 注意：这个属性在旧版 Firefox 中不支持，可加
@supports (overscroll-behavior: contain)条件包裹
overscroll-behavior 和 dvh 单位——不加它们，同一套代码在 iOS 和桌面 Chrome 上表现可能完全不同。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
