scroll-snap-type 必须配合 scroll-snap-align 才生效；仅设容器 scroll-snap-type: y mandatory 不触发吸附，需在每个子元素上显式声明 scroll-snap-align: start/center/end，且容器须有溢出滚动（overflow-y: auto）和固定高度。
scroll-snap-type 必须配合 scroll-snap-align 才生效
单独给容器设 scroll-snap-type: y mandatory 不会触发吸附，滚动依然自由。必须同时在每个可吸附的子元素上设置 scroll-snap-align，比如 scroll-snap-align: start 或 center。常见错误是只加了父容器属性，忘了子元素对齐声明。
使用场景：全屏轮播、分页式垂直导航、卡片式横向滚动列表。
-
scroll-snap-align: start吸附到元素顶部（y 方向）或左侧（x 方向） -
scroll-snap-align: center吸附到元素中心，体验更自然，但需确保容器高度/宽度固定且子元素尺寸一致 -
scroll-snap-align: end吸附到底部或右侧，注意它依赖元素自身盒模型边界，不是容器边界
容器必须启用滚动才能触发 snap 行为
如果父容器没有溢出（比如子元素高度总和小于容器高度），scroll-snap-type 完全不工作。必须满足两个条件：一是容器有明确的 height 或 max-height，二是设置了 overflow-y: auto（垂直）或 overflow-x: auto（水平）。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 用
overflow: hidden—— 吸附失效，且无法滚动 - 用
overflow: scroll—— 在 macOS 上会强制显示滚动条，影响视觉；推荐auto - 容器用
display: flex但没设flex-direction: column+overflow-y—— flex 容器默认不产生块级滚动流，snap 不触发
mandatory 和 proximity 的行为差异很关键
scroll-snap-type 第二个参数决定吸附强度：mandatory 强制最终停在某个 snap point，哪怕用户轻扫也会被拉回；proximity 只在滚动停止位置靠近 snap point 时才吸附，更宽松，适合长列表或内容密度高的场景。
性能与兼容性提示：
-
mandatory在 Safari 中表现最稳定；Chrome 和 Firefox 对proximity支持稍弱，有时吸附不灵敏 - 移动端 iOS Safari 对
scroll-snap-type: y mandatory的触控惯性滚动支持好，但快速连划可能跳过中间项 —— 建议搭配scroll-behavior: smooth提升体验 - 不要在大量动态插入/删除的列表中高频切换
scroll-snap-type值，可能引发重排或吸附点错位
调试时检查 scroll-snap-stop 和 scroll-margin
当吸附位置偏移（比如卡在标题下方而不是顶部），大概率是元素自身边距或内边距干扰了 snap 点计算。此时用 scroll-margin-top（垂直）或 scroll-margin-left（水平）微调吸附基准线。
另一个隐藏开关是 scroll-snap-stop: always，它能阻止用户跳过某个 snap point（比如强制每页都停），但仅 Chrome 120+ 和 Safari 17.4+ 支持，目前实用价值有限。
调试建议：
- 浏览器开发者工具里勾选 “Rendering” → “Scroll snap points” 可视化吸附位置（Chrome / Edge）
- 临时给子元素加
outline: 2px solid red，确认scroll-snap-align是否作用在预期元素上 - 避免在
position: sticky元素上同时用scroll-snap-align，行为不可控
