scroll-snap-type 失效主因是容器未启用滚动上下文：overflow 需设为 auto/scroll（非 visible），方向须匹配（如 x 对应 overflow-x），子项必须是直接子元素，mandatory 易致卡顿，proximity 更自然但需配合 scroll-padding。
scroll-snap-type 触发不了滚动吸附？检查容器溢出和滚动方向
滚动捕捉失效，八成是因为容器没开启滚动上下文。scroll-snap-type 只在有滚动行为的元素上生效，不是加了就自动“吸住”。
-
overflow必须是auto、scroll或hidden（但hidden没滚动条，实际无效），不能是visible（默认值） - 方向必须匹配：
scroll-snap-type: x mandatory要求容器水平可滚动（overflow-x: auto），垂直同理；混用x和y时，得同时设overflow-x和overflow-y - 父容器若设了
transform、perspective或filter，可能创建新的层叠上下文，间接干扰滚动流——先试着移除看看
scroll-snap-align 不生效？子项必须是直接滚动子元素
scroll-snap-align 是作用在滚动容器的**直接子元素**上的，嵌套一层 div 就断了。很多人把卡片包在 <section></section> 里，再套个 <div class="wrapper">，结果 <code>scroll-snap-align: center 完全没反应。
- 确保带
scroll-snap-align的元素是滚动容器的**第一级子节点**，中间不能有非滚动用途的包裹层 - 不要依赖 flex 或 grid 的对齐来“模拟”吸附位置：滚动捕捉只认
scroll-snap-align值（start/end/center）和自身盒模型边界，跟justify-content无关 - 如果子项用了
width: 100vw但容器有 padding，吸附会偏移——建议用scroll-padding微调，而不是靠 margin 抵消
滚动后卡在两个 snap 点之间？mandatory 和 proximity 的取舍
scroll-snap-type 的第二个参数决定行为强度：mandatory 强制停在最近点，proximity 只在靠近时才吸附。用户觉得“滑不稳”“松手后回弹异常”，往往是因为误用了 mandatory。
-
mandatory在快速滑动或惯性滚动中容易触发“硬停”，尤其在低性能设备上，可能造成视觉卡顿或滚动中断 -
proximity更自然，但需要配合足够大的scroll-padding（比如scroll-padding: 20px）扩大吸附范围，否则轻微滑动不触发 - iOS Safari 对
mandatory支持更严格，但对proximity的响应阈值略高；Android Chrome 则相反——真机测试比 DevTools 模拟更可靠
动画卡顿或吸附延迟？避免在 scroll-snap 元素上做重绘操作
滚动捕捉本身不触发重排，但如果你在 scroll-snap-align 元素上加了 transition、transform 动画，或监听 scroll 事件做计算，就会拖慢吸附帧率。
立即学习“前端免费学习笔记（深入）”；
- 别在滚动容器或其子项上写
transition: all .3s—— 滚动中频繁触发样式变更，GPU 负担陡增 - 避免用
scroll事件监听滚动位置来“手动同步状态”，scroll-snap是声明式行为，JS 干预反而破坏原生流畅度 - 如果需高亮当前项，用
:focus-within或IntersectionObserver替代实时监听，更轻量也更稳定
box-sizing 混用、contain 过度隔离、动态改 width）都会让吸附失效，而且错误不报红，只静默退化。
