scroll-snap-align 是CSS属性，用于指定元素在滚动容器中对齐的位置（如start、center、end），它本身不触发滚动或分页，仅被动配合父容器的scroll-snap-type生效；必须同时设置scroll-snap-type（如y mandatory）并确保容器有明确高度和overflow滚动，否则无效。
scroll-snap-align 是什么，它不负责“全屏切换”
scroll-snap-align 本身只是告诉浏览器“这个元素希望在滚动容器中对齐到哪个位置”，比如 start、center 或 end。它不触发滚动、不监听事件、也不控制“单页”逻辑——它只是被动配合 scroll-snap-type 的定位策略。真正让滚动“卡住一页”的是父容器的 scroll-snap-type 设置，不是子元素加了 scroll-snap-align 就自动分页。
必须设置 scroll-snap-type 才能启用 snap 行为
只给 section 加 scroll-snap-align: center 没用，滚动依然自由滑动。关键一步是给滚动容器（通常是 body 或一个 div）加上 scroll-snap-type：
html {
scroll-behavior: smooth;
}
section {
scroll-snap-align: center;
height: 100vh;
}
main {
scroll-snap-type: y mandatory;
overflow-y: auto;
height: 100vh;
}
-
scroll-snap-type: y mandatory表示垂直方向强制启用吸附，proximity则是松散模式（容易失效，别用） - 容器必须有明确高度（如
100vh）且开启溢出滚动（overflow-y: auto），否则scroll-snap-type被忽略 -
scroll-behavior: smooth推荐加在根或容器上，否则吸附过程会生硬跳变
常见失效原因：元素尺寸、嵌套和滚动源不匹配
实际开发中最常遇到“写了但不卡”的情况，基本都出在这几个点：
- section 高度不足
100vh（比如有 margin/padding/border，或被 flex 压缩），导致无法填满视口，scroll-snap-align失去对齐基准 - 滚动容器不是直接父级，比如用了
position: fixed的导航栏遮挡，或外层有transform/will-change，会创建新的层叠上下文并中断 snap 链路 - 用户用鼠标滚轮快速滚动时，某些浏览器（特别是 Safari）对
mandatory的执行不严格，可临时加overscroll-behavior: contain阻止透传 - JavaScript 主动调用
element.scrollIntoView()时，默认行为可能绕过 snap，需显式传参：el.scrollIntoView({ behavior: 'smooth', block: 'center' })
移动端 iOS Safari 的兼容细节
iOS 15+ 支持良好，但仍有两个硬约束必须满足，否则 scroll-snap 完全静默：
立即学习“前端免费学习笔记（深入）”；
- 滚动容器不能是
body或html元素（iOS 不支持根元素 snap），必须用一个包裹div作为滚动容器 - 每个 snap 区域（如
section）必须有明确的height（不能靠min-height或内容撑开），且推荐用vh单位而非百分比 - 避免在滚动容器上同时使用
touch-action: pan-y—— 它会禁用 snap 吸附，除非你明确需要手势优先级控制
复杂点在于：snap 是 CSS 声明式行为，没有回调、不暴露当前页索引、也无法感知“正在滚动中”。如果需要高亮导航项或联动动画，还得靠 IntersectionObserver 或 scroll 事件兜底，scroll-snap-align 只管“停在哪”，不管“怎么响应”。
