CSS3怎么实现滚动吸附效果_scrollsnap属性用法【教程】

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 彻底静默。