scroll-snap-type 不生效的首要原因是容器未真正滚动，需同时满足 overflow 设置和内容溢出两个硬条件，并确保方向参数与实际滚动方向一致。
scroll-snap-type 不生效？先查 overflow 和滚动方向
最常见的情况不是属性写错，而是容器根本没滚动起来。scroll-snap-type 只在真正可滚动的容器上起作用。必须同时满足两个硬条件：容器设置了 overflow-y: scroll（或 auto）且子元素总高度 > 容器高度（产生滚动条）；scroll-snap-type 的方向参数（x/y）必须和实际滚动方向一致。
比如你用触控板垂直滑动，但写了 scroll-snap-type: x mandatory，等于白配。移动端 Safari 在 iOS 15.4 之前还要求加 -webkit-overflow-scrolling: touch 才能触发吸附，现在虽逐步弃用，但旧机型仍可能卡在这里。
- 检查滚动条是否真实出现（不是靠
height+overflow假设出来的） - 用 DevTools 的 “Rendering” 面板勾选 “Scroll snapping regions”，看浏览器是否识别出吸附区域
- 水平滚动场景下，确保父容器有明确宽度，子项用
flex-shrink: 0或white-space: nowrap防止换行破坏布局
mandatory vs proximity：别默认写 mandatory
scroll-snap-type: y mandatory 看似稳妥，但会强制每次滚动都停靠——哪怕用户只是想快速滑过几屏内容。这在长文档阅读、列表浏览等场景里反而破坏体验。而 proximity 是更自然的选择：只在滚动结束位置离吸附点足够近时才触发对齐。
两者差异不是“要不要吸附”，而是“什么时候吸附”。mandatory 适合轮播图、全屏幻灯片这类强分页场景；proximity 更适合内容流、仪表板面板切换等需要灵活浏览的界面。
- 移动端轮播首选
scroll-snap-type: x mandatory，配合scroll-snap-align: center实现居中精准停靠 - 垂直文档分页可用
scroll-snap-type: y proximity，避免用户快速滚屏时被强行截停 - 不要混用：同一个容器内不能同时存在
mandatory和proximity规则
scroll-behavior: smooth 要小心嵌套和动态内容
scroll-behavior: smooth 看似一行解决平滑滚动，但它在嵌套滚动容器中容易失效或干扰。比如外层 .page 设了 scroll-behavior: smooth，内层 .carousel 也设了，结果轮播切换时动画卡顿或跳帧。
更隐蔽的问题是动态内容加载：如果滚动容器高度在异步请求后才撑开，scrollIntoView({ behavior: 'smooth' }) 可能计算错目标位置，导致滚动偏移或直接失败。
- 用
overscroll-behavior: contain隔离内外层滚动行为，防止滚动链穿透 - 动态内容插入后，手动调用
el.scrollIntoView({ block: 'start', behavior: 'smooth' })比依赖 CSS 更可控 - Safari 对
scroll-behavior的支持从 14 开始，iOS 13.7 及更早需降级为 JS 模拟（如requestAnimationFrame+scrollTop）
检测浏览器是否支持 scroll-snap-type 的真实方式
CSS 支持检测不能只靠 @supports (scroll-snap-type: y mandatory)，因为部分旧版 Safari（如 iOS 12）会错误地返回 true，但实际不生效。更可靠的方式是结合 DOM 行为验证：
创建一个临时容器，设置 scroll-snap-type: y mandatory 和两个子项，用 JS 触发一次小幅度滚动（scrollBy(0, 1)），再立刻读取 scrollTop。如果值被重置为 0 或子项高度的整数倍，说明吸附已工作；否则视为不支持。
- 不要依赖
CSS.supports()单一判断，它无法反映渲染层的真实行为 - 移动端真机测试比模拟器更重要，特别是 iOS 14–15.3 的混合支持状态
- 当检测失败时，回退方案优先考虑
scroll-snap-type: y proximity而非完全放弃，多数场景下仍有基础吸附效果
滚动吸附真正的复杂点不在写法，而在「滚动是否真实发生」和「浏览器是否真的执行了吸附逻辑」之间那层看不见的间隙。很多问题不是 CSS 写错了，而是我们以为它在滚动，其实它只是在 overflow 区域里静止地 overflow 了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
