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

看不見的法師 2026-01-01 00:00:00 次阅读

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;
}