scroll-snap-type: mandatory 仅在滚动容器上生效，需配合 overflow 和内容溢出；scroll-snap-align 仅作用于直接子元素，指定其边缘或中心对齐容器视口，且子元素须有明确尺寸。
scroll-snap-type: mandatory 不是“加了就吸附”，它只在容器可滚动且子元素满足对齐条件时才生效；写错位置、漏掉 overflow 或用错轴向，都会导致完全没反应。
scroll-snap-type 必须设在滚动容器上，不是子元素
很多人把 scroll-snap-type: y mandatory 写在每个 section 或 .card 上，结果滚动毫无停顿感——这个属性**只对滚动容器本身生效**，比如 <div class="scroller">、<main>，甚至 <body>（需配合 overflow）。
常见错误现象：scroll-snap-type: x mandatory 放在 .slide 元素上，控制台无报错，但拖动/滑动后不停顿。
- 检查目标元素是否为**直接父容器**：只有它设置了
scroll-snap-type，子元素的scroll-snap-align才可能被识别 - 移动端 Safari 对
mandatory支持最稳，但 iOS 15–16 早期版本对proximity有兼容问题，别混用 - DevTools 的“Layout”面板里可视化 snap 点不可靠，应以实际滚动是否停顿、或查看 computed styles 中
scroll-snap-type是否被解析为准
容器必须有 overflow + 内容溢出，否则 scroll-snap 形同虚设
scroll-snap-type 要起作用，容器得先能滚动。这意味着两件事缺一不可：一是显式设置 overflow-x 或 overflow-y 为 auto / scroll，二是内容尺寸必须超出容器尺寸（比如子元素总宽 > 容器宽）。
立即学习“前端免费学习笔记（深入）”；
典型遗漏点：height: 100vh 的容器没设 overflow-y: auto，或者 flex 容器用了 flex-wrap: wrap 导致内容不溢出。
- 垂直全屏滚动：容器需
height: 100vh; overflow-y: auto;，子元素height: 100vh;且数量 ≥ 2 - 横向轮播：容器设
display: flex; overflow-x: auto;，子元素用flex: 0 0 100vw;或固定宽（如width: 375px;） - 隐藏滚动条不影响 scroll-snap：可用
::-webkit-scrollbar { display: none; }或scrollbar-width: none;，但不能删掉overflow
scroll-snap-align 只对直接子元素生效，且取值决定锚点位置
scroll-snap-align 的值不是“让元素居中”，而是指定该元素的哪个边缘/中心去贴合容器视口的对应边。它只作用于滚动容器的**直接子元素**（不继承，也不影响孙子节点）。
例如 scroll-snap-align: start 表示该子元素的**顶部边界**对齐容器顶部；center 是元素**中心点**对齐容器中心；end 是**底部边界**对齐容器底部。
- 垂直分屏常用
scroll-snap-align: start，避免首屏顶部留白 - 横向卡片轮播多用
scroll-snap-align: center，视觉更平衡 -
nearest在部分安卓 WebView 中支持不稳定，生产环境建议避开 - 若需微调吸附位置（比如顶部留出导航栏高度），用
scroll-margin-top: 64px，而非 padding 或 margin
mandatory 和 proximity 的行为差异直接影响体验
scroll-snap-type: y mandatory 强制滚动结束时必须停在一个 scroll-snap-align 匹配的位置；而 proximity 是“就近吸附”，短距离滑动可能不触发吸附，直接停在中间——这在触控场景下容易误判。
iOS Safari 对 mandatory 的惯性滚动处理更可靠，但存在轻微偏移（尤其快速甩动后），这是渲染管线限制，不是 bug。
- 做首屏引导、产品介绍页等强分步场景，必须用
mandatory - 不做滚动监听时，
mandatory能省掉大量 IntersectionObserver 或 scroll 事件逻辑 - 如果要用 JS 检测当前停在哪一屏，别依赖
scrollTop计算——用getBoundingClientRect()判断哪个子元素top ≤ 0 && bottom ≥ 0更准
最容易被忽略的是：scroll-snap-align 的生效前提是子元素在滚动方向上有明确尺寸（比如 height 或 width），如果子元素靠内容撑开又没设最小尺寸，吸附会失效。另外，transform: scale() 或 position: absolute 可能破坏 snap 行为，调试时先还原基础布局。
