scroll-snap-type 必须配合 scroll-snap-align 才生效；容器设 y mandatory 时子项须设 start/center/end；方向需匹配实际滚动轴；mandatory 强制停靠，proximity 仅就近停；iOS 需明确高度和硬件加速。
scroll-snap-type 必须配合 scroll-snap-align 才生效
单独写 scroll-snap-type: y mandatory; 不会触发任何吸附行为——这是最常见的“设了没反应”原因。滚动容器（如 div）需要定义捕获类型，而它的直接子元素必须显式声明对齐方式，否则浏览器找不到“该停在哪”。
- 容器上设
scroll-snap-type: y mandatory;，子项就得加scroll-snap-align: start;（或center/end） - 如果子项是
flex或grid项目，注意scroll-snap-align仅作用于块级盒模型边界，不响应内边距或内容对齐 - 用
scroll-snap-stop: always;可强制跳过中间项（比如轮播图禁止停在半张图位置），但兼容性略差（Safari 15.4+、Chrome 99+）
滚动方向与 scroll-snap-type 的值必须严格匹配
scroll-snap-type 第一个参数只能是 x、y 或 both，它和容器实际滚动方向强绑定。即使 CSS 写了 overflow-y: auto，若设成 scroll-snap-type: x mandatory，吸附依然无效。
- 垂直滚动容器 → 用
scroll-snap-type: y mandatory; - 水平滚动（如
white-space: nowrap+overflow-x: auto）→ 必须用scroll-snap-type: x mandatory; -
both容易引发意外交互：用户轻微斜向滑动时，浏览器可能优先沿某轴吸附，导致手感“卡顿”或“偏移”
scroll-snap-type 的 mandatory 和 proximity 差异很实在
mandatory 强制滚动结束时必须停在最近的捕获点；proximity 只是“尽量停”，离得远就直接滑过去——这不是性能开关，而是行为策略选择。
- 做全屏翻页、产品卡片轮播，选
mandatory，否则用户松手后还会惯性滑出视口 - 做长列表中“辅助定位”的锚点导航（比如目录跳转），用
proximity更自然，避免小幅度滚动被强行打断 - Safari 对
proximity的判定阈值较宽松，同一段代码在 Chrome 中吸附明显，在 Safari 中可能完全不触发
移动端 iOS Safari 的 scroll-snap 行为有隐藏限制
iOS 15.4 之前，scroll-snap-type 在 body 或 html 上基本无效；即使现在支持，也要求容器满足两个硬条件：有明确高度（不能靠内容撑开）、且启用硬件加速（常靠 transform: translateZ(0) 触发）。
立即学习“前端免费学习笔记（深入）”；
- 别把
scroll-snap-type直接写在body上，套一层div并设height: 100vh+overflow-y: scroll - 遇到“iOS 滚不动/吸附失灵”，先检查是否启用了
-webkit-overflow-scrolling: touch（已废弃，且与 scroll-snap 冲突） - 真机调试时，用 Safari 开发者工具的「Rendering」面板勾选 “Scroll snapping indicators”，能直观看到捕获点位置是否被识别
scroll-snap 的关键不在属性多寡，而在容器、子项、滚动方向、平台限制这四者的对齐——漏掉任一环，它就安静得像没写过。
