scroll-snap-type 必须设在滚动容器上而非子元素，且容器需有 overflow-x/y:auto/scroll 并内容溢出；scroll-snap-align 决定子元素锚点对齐方式（start/end/center），仅直接子元素生效，移动端 Safari 对 mandatory 支持更稳但存在惯性偏移，DevTools 可视化不可靠，应以实际滚动停顿或 computed styles 为准。
scroll-snap-type 必须设在滚动容器上，不是子元素
很多人把 scroll-snap-type 写在要吸附的卡片或 section 上，结果完全没反应——它只对**滚动容器本身**生效，比如 div、main 或 body。容器得有明确滚动行为（比如设置了 overflow-y: auto 且内容溢出），否则 scroll snap 就是摆设。
常见错误现象：scroll-snap-type: y mandatory 写在每个 .slide 上，控制台没报错，但滚动时毫无吸附感。
- 滚动容器必须有
overflow-x或overflow-y设为auto/scroll - 容器内直接子元素（不是孙子）才响应
scroll-snap-align - 移动端 Safari 对
scroll-snap-type: y mandatory支持更稳，proximity容易失效
scroll-snap-align 的取值和对齐基准很关键
scroll-snap-align 决定子元素哪一部分“贴住”容器视口边缘。它不是居中对齐，而是指定锚点：比如 start 表示该元素的**顶部**对齐容器顶部，end 是底部对齐容器底部，center 是元素中心对齐容器中心。
使用场景：横向轮播常用 scroll-snap-align: center 配合 scroll-snap-type: x mandatory；垂直长页面分屏则多用 start。
立即学习“前端免费学习笔记（深入）”；
-
scroll-snap-align: start最稳妥，兼容性好，适合首屏/分节页 - 不要混用
start和end在同一容器的不同子项里，行为不可预测 - 如果子元素有 margin 或 padding，会参与对齐计算，容易偏移——建议用
box-sizing: border-box+ 清除默认边距
强制吸附（mandatory）在 iOS 上可能被用户手势覆盖
iOS 的 WebKit 实现中，scroll-snap-type: y mandatory 并不真正“强制”。快速滑动后松手，系统仍可能停在两个吸附点之间（尤其在内容高度不一致时）。这不是 bug，是 Safari 的滚动惯性策略。
性能影响：频繁触发 scroll snap 会增加合成层开销，若子元素含复杂动画或大量 DOM，滚动可能卡顿。
- 测试时务必真机操作，模拟器常表现过度理想
- 避免在
position: sticky或transform元素上叠加 scroll snap，兼容性风险高 - 如需绝对精准停靠，得配合
scroll-behavior: smooth+ JavaScript 监听scrollend事件手动修正（但scrollend在旧版 Safari 不支持）
Chrome DevTools 里看不到 scroll snap 的吸附线？
Chrome 的“Rendering”面板里勾选 “Scroll snap areas” 后，理论上应高亮吸附区域，但实际经常不显示——这不是你配置错了，是 Chromium 的渲染调试功能长期不稳定，尤其在 flex/grid 布局下。
验证是否生效最可靠的方式只有手动滚动观察停顿点，或用 JavaScript 检查 element.scrollLeft/scrollTop 是否稳定落在预期值附近。
- 别依赖 DevTools 可视化判断 scroll snap 是否启用
- 检查 computed styles 里是否存在
scroll-snap-type和子元素的scroll-snap-align值，比看高亮更准 - 如果用了 CSS custom properties 动态改
scroll-snap-type，注意它不支持 CSS 动画或 transition
