scroll-snap-type本身不实现吸附，仅声明滚动结束时强制停靠；生效前提为容器可滚动、子项设scroll-snap-align、轴向与严格度匹配，且必须写在overflow-y:scroll的直接父容器上。
scroll-snap-type 本身不“实现”吸附，它只是声明“请浏览器在滚动结束时强制停到对齐点”，真正起作用的前提是：容器可滚动 + 子项声明了对齐锚点 + 轴向和严格程度匹配。
scroll-snap-type 必须写在滚动容器上，不是子元素
常见失效原因：把 scroll-snap-type: y mandatory 加在 <section> 或 .slide 上。它只对设置了 overflow-y: scroll（或 auto）的**直接父容器**生效——比如 <main>、<div class="scroll-container">，甚至 <html>（全页滚动场景）。
DevTools 中能看到声明但 computed styles 里 scroll-snap-type 是空值？基本就是写错位置了。
- ✅ 正确：
.scroll-container { height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory; } - ❌ 错误：
section { scroll-snap-type: y mandatory; }（子元素无效） - ⚠️ 注意：
overflow: hidden会彻底禁用 scroll snap；overflow: auto在部分安卓 WebView 中不稳定，优先用overflow-y: scroll
容器必须真实可滚动，否则 scroll-snap 静默失效
哪怕样式全对，只要没满足以下三个硬性条件，scroll-snap-type 就不会触发——它不报错，也不警告，只是什么也不做。
立即学习“前端免费学习笔记（深入）”；
- 容器尺寸明确：垂直用
height: 100dvh（比100vh更稳，避开 iOS 地址栏收缩跳变），水平用width: 100vw - 溢出行为启用：
overflow-y: scroll（垂直）或overflow-x: auto（水平） - 内容总高度/宽度 > 容器尺寸：例如多个
section叠加后总高 >100dvh，否则无滚动空间，吸附无从谈起
scroll-snap-align 必须设在直接子元素上，且成对书写
scroll-snap-align 决定“子元素哪一部分贴住容器视口”，但它只对滚动容器的**直接子元素**生效。中间多套一层 <div> 就会断掉。
-
scroll-snap-align: start是简写，等价于start start，适用于垂直分屏（每个section顶部对齐视口顶部） -
scroll-snap-align: center center必须写两个值，适用于横向轮播（要求所有子项尺寸严格一致） -
scroll-snap-align: end单写无效，浏览器会忽略整条声明 - 禁止在子项上用
margin或padding调整位置——这些会干扰吸附基准；改用flex或grid内部居中
mandatory 和 proximity 的实际表现差异很大
文档说 mandatory 是“强制停靠”，但真实体验受浏览器影响极大：
- iOS Safari 快速滑动后可能停在两个吸附点之间——这不是 bug，是 WebKit 对滚动惯性的妥协；确保所有子项高度严格一致（如统一用
min-height: 100dvh）能缓解 - 安卓 WebView 中，
mandatory常静默失效，必须补三件事：scroll-snap-stop: always加到每个子项、容器不用100vh改用固定像素或min-height: 100dvh+height: fit-content、子项避免被transform或position: absolute破坏文档流尺寸 -
proximity在长内容阅读场景更自然，但移动端常出现“半吸附”（松手停住但没对齐），全屏场景建议坚持用mandatory
最容易被忽略的是：你写的每一条 scroll-snap-type，都依赖容器是否真正在滚动。检查 overflow 是否生效、子项总宽/高是否真的超出容器——这是吸附逻辑启动的唯一开关。
