scroll-snap-type仅控制吸附行为，不提供平滑效果；真正实现平滑需配合scroll-behavior: smooth，且滚动容器必须满足可滚动前提（如overflow-y: scroll、height: 100vh、内容溢出）。
scroll-snap-type 本身不控制“平滑”，只决定吸附行为；要真正平滑，必须配合 scroll-behavior: smooth，且滚动容器需满足可滚动前提。
scroll-snap-type 必须写在滚动容器上，不是子元素
很多人把 scroll-snap-type: y mandatory 错加在 section 或 card 上，结果完全没反应。它只对直接承载滚动行为的父容器生效——比如 .scroll-container、main 或设置了 overflow-y: scroll 的 div。
- ✅ 正确：父容器设
height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory - ❌ 错误：只给子项设
scroll-snap-type，父容器没 overflow 或高度塌陷 - ⚠️ 注意：
overflow: hidden会彻底禁用 scroll snap；overflow: auto在部分安卓 WebView 中也不稳定，优先用overflow-y: scroll
mandatory 和 proximity 的实际差异远不止文档描述
mandatory 表示“强制停靠”，哪怕用户快速甩动，浏览器也会回弹对齐；proximity 是“松散吸附”，只在松手时离吸附点足够近（通常约 20%–30% 容器高度内）才触发。但真实表现受设备和浏览器影响极大：
- Firefox 对
mandatory更严格：若某页高度< 100vh，可能直接关闭整个 snap 行为 - Chrome 容错稍高，但快速滚动时仍可能跳过中间页
- 移动端 Safari 在
proximity下常出现“半吸附”——滚动停住但没对齐，建议全屏场景统一用mandatory
安卓 WebView 中 scroll-snap-type 失效的三个硬性补救条件
不是兼容性问题，而是安卓旧版 WebView 渲染引擎压根不识别 scroll snap，除非你手动“唤醒”它：
立即学习“前端免费学习笔记（深入）”；
- 每个子项（如
.section或.slide）必须显式加scroll-snap-stop: always - 滚动容器不能用
100vh（动态值在 WebView 中易计算错误），改用固定像素高度或min-height: 100vh+height: fit-content组合 - 子项必须设
scroll-snap-align: start（或center），且避免被flex: 1、transform、position: absolute破坏文档流尺寸
漏掉任意一条，scroll-snap-type 在 Samsung Internet 或 Android 11 WebView 中大概率静默失效——不是卡顿，是根本没吸附。
scroll-behavior: smooth 不是万能的，尤其在安卓上
scroll-behavior: smooth 只影响 JS 触发的滚动（如 element.scrollIntoView()），对原生手势滚动无效。而 scroll snap 的“平滑感”其实来自浏览器合成层对吸附过程的插值处理，不是靠这个属性。
- Android Chrome 93+ 支持
scrollend事件，可用它做 JS fallback：监听到滚动结束，再调scrollTo({ top: targetY, behavior: 'smooth' }) - 旧版安卓 WebView 中
behavior: 'smooth'常退化为instant，此时需用requestAnimationFrame手动分帧滚动 - 别在
scroll事件里算 scrollTop 来判断当前页——scroll snap 过程中 scrollTop 可能被截断或跳变，极不可靠
真正容易被忽略的是：即使所有 CSS 都写对了，overscroll-behavior-y: contain 或父级 contain: layout paint 也可能让 snap 彻底失能。真机调试时，先在 DevTools 里 toggle 关闭这些属性看是否立即恢复。
