CSS Scroll Snap 生成器

选择滚动轴、对齐方式、捕捉类型与内边距,工具会生成滚动容器与子项的 scroll-snap-type、scroll-snap-align 等相关 CSS,可用于轮播、整屏滚动等场景。全部在浏览器本地完成。

捕捉设置 等待输入

为滚动容器添加 scroll-snap-type,为子项添加 scroll-snap-align。

计算结果
属性数—
轴—
选择参数后点击生成,CSS 代码将显示在这里。

生成的代码可直接粘贴使用;结果仅供参考。

计算说明
  • scroll-snap-type 定义滚动容器的捕捉轴与类型。
  • mandatory 会强制停在捕捉点,proximity 更宽松。
  • 子项使用 scroll-snap-align 指定对齐位置。
  • scroll-padding 可避免内容贴近容器边缘。
  • 常用于轮播、整屏滚动与分页式内容。