免费在线CSS Scroll Snap滚动捕捉生成器，可视化设置滚动容器对齐方式。支持scroll-snap-type、scroll-snap-align、flex/grid布局，实时预览，一键复制CSS代码。无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
⚙️ 滚动容器设置
配置滚动容器的捕捉行为和对齐方式。
16px
6
220px
px
🎨 预览颜色
👁️ 实时预览
横向滚动下面的容器，观察捕捉对齐效果。每个项目会随滚动自动对齐到容器中心/开头/末尾。
💻 CSS代码
📖 CSS Scroll Snap 详解
CSS Scroll Snap 是 CSS 滚动捕捉规范，允许开发者控制滚动容器的对齐行为，让用户体验更加流畅和一致。
核心属性
- scroll-snap-type — 定义滚动容器捕捉的轴方向和严格度。方向：x/y/both/inline/block，严格度：mandatory/proximity
- scroll-snap-align — 定义子元素在滚动视图中的对齐位置（start/center/end）
- scroll-padding — 定义滚动容器边缘的偏移量，避免对齐到边缘
- scroll-margin — 定义子元素边缘的偏移量
- scroll-snap-stop — 控制是否强制每次滚动停在一个捕捉点
在线CSS Scroll Snap滚动捕捉生成器应用场景
- 轮播图/幻灯片 — 每张图片对齐到容器
- 水平分页菜单 — 菜单项逐个对齐
- 图片画廊 — 每张图片居中对齐显示
- 横向时间线 — 时间节点依次对齐
- 产品浏览 — 卡片逐个对齐
浏览器兼容性
CSS Scroll Snap 已获得所有现代浏览器（Chrome 69+、Firefox 68+、Safari 11+、Edge 79+）的广泛支持。
常见问题
CSS Scroll Snap 的浏览器兼容性如何？
所有现代浏览器（Chrome 69+、Firefox 68+、Safari 11+、Edge 79+）均已支持 CSS Scroll Snap。
mandatory 和 proximity 有什么区别？
mandatory 强制每次都对齐到捕捉点，proximity 仅在靠近捕捉点时才对齐，更自然，推荐用于大多数场景。
scroll-snap-align 有哪些取值？
支持 start（开头对齐）、center（居中对齐）、end（末尾对齐），可自由组合到 x/y 方向。