滚动捕捉类型属性

最后更新：2026-09-13

scroll-snap-type 滚动捕捉类型属性

scroll-snap-type 用于实现滚动时的吸附（snap）效果，让滚动容器在停止时自动将指定元素对齐到容器的边缘或中心。它常用于实现轮播图、全屏滚动页面和横向滑动列表，让滚动体验更加精准和可控。

分类
初始值	none
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ];

⚙️ 取值

值	类型	描述
`none \| x \| y \| block \| inline \| both \| mandatory \| proximity`	关键字	滚动捕捉类型

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
scroll-snap-type	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： mandatory 会强制吸附到最近的捕捉点；proximity 只在滚动停止位置接近捕捉点时才吸附，更宽松。

提示： 需要配合子元素的 scroll-snap-align 一起使用，才能确定每个子元素的对齐位置。

❓ 常见问题

Qscroll-snap-type 和 scroll-behavior: smooth 冲突吗？

A不冲突，两者职责不同且常搭配使用：scroll-snap-type 负责「停在哪里」——滚动停止时吸附到捕捉点；scroll-behavior 负责「怎么滚过去」——用平滑动画。同时设置后，滚动会先平滑再精确吸附，是轮播和全屏滚动的标准组合。

Q为什么设置了 scroll-snap-type 但没有吸附效果？

A最常见的原因：子元素缺少 scroll-snap-align 属性，没有捕捉点可吸附；或容器尺寸与子元素不匹配，滚动停止时没有可达的吸附位置；或容器内容没有溢出、根本不可滚动。检查：容器要能真正滚动，子元素要设置 scroll-snap-align: start/center/end。

Qmandatory 和 proximity 有什么区别？

Amandatory 强制吸附：滚动停止时必定吸附到最近的捕捉点，即使只滚了一点；proximity 宽松吸附：只有滚动停止位置接近捕捉点时才吸附，否则自由停下。mandatory 体验稳定但可能造成「滚不到中间内容」的困扰，proximity 更自然，适合内容密度高的容器。

Qscroll-snap-type 的浏览器兼容性怎么样？

A桌面端 Chrome、Edge、Firefox、Safari 均支持，但 Safari 较长时间使用旧版规范，需要 -webkit-scroll-snap-type 前缀且语法不同；Chrome 69+、Firefox 68+ 支持新规范。移动端 iOS Safari 13+ 可用，面向老 iOS 时注意前缀差异。