scroll-snap-type 和 scroll-snap-align 是浏览器原生支持的滚动吸附声明式属性，需在 overflow 非 visible 的容器上设 scroll-snap-type（如 y mandatory），子项设 scroll-snap-align（如 start），并确保结构、尺寸与兼容性满足要求。
scroll-snap-type 和 scroll-snap-align 是实现滚动吸附（scroll snapping）的核心 CSS3 属性，不是“教程式功能”，而是浏览器原生支持的声明式行为。它不依赖 JavaScript，但对容器结构、滚动方向和子元素尺寸有硬性要求，用错就完全不生效。
scroll-snap-type 必须设在可滚动容器上
这个属性只在设置了 overflow（且值不为 visible）的容器上起作用。常见错误是把它写在 body 或 html 上试图全局控制——多数浏览器会忽略，因为根元素滚动行为受 UA 样式和平台限制。
- 必须显式设置
overflow-y: scroll或overflow-x: auto（取决于滚动方向） -
scroll-snap-type的第二个参数（mandatory/proximity）决定吸附强度：mandatory强制每次滚动停在最近的吸附点；proximity仅在用户松手时靠近才吸附，更宽松 - 横向滚动需写
scroll-snap-type: x mandatory，纵向是y mandatory，不能写成both（无效）
scroll-snap-align 要写在每个滚动子项上
吸附目标不是容器，而是它的直接子元素。每个子项需单独设置 scroll-snap-align，否则不会被识别为吸附点。
- 常用值是
start（对齐容器起始边缘）、end、center - 如果容器是竖向滚动，子项设
scroll-snap-align: start表示顶部与容器顶部对齐 - 若子项高度不固定或含
flex/grid布局，可能因渲染时机导致吸附失效——建议给子项加明确的height或min-height
section {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
section > article {
scroll-snap-align: start;
height: 100vh;
}
移动端 Safari 和旧版 Chrome 的兼容陷阱
iOS Safari 13.4+ 才完整支持 scroll-snap-type 的 mandatory 模式；更早版本即使写了也回退为 proximity。Android WebView（尤其 Chrome 80 以前）存在吸附延迟或跳过中间项的问题。
立即学习“前端免费学习笔记（深入）”；
- 避免在
transform: scale()或iframe内使用，会破坏 scroll snap 计算上下文 - 不要和
overscroll-behavior: contain混用——后者可能截断滚动事件，导致吸附不触发 - 调试时用 Chrome DevTools 的 “Rendering” 面板勾选 “Scroll snap points” 可视化吸附位置
真正难的不是写对那两行 CSS，而是让整个滚动链路里没有隐式 overflow: hidden、没有弹性高度塌陷、没有父级 contain: layout 干扰——这些都会让 scroll-snap-align 彻底静默。
