🧲
滚动吸附生成器
配置 scroll-snap 让横向/纵向滚动自动吸附到每一屏，做轮播、画廊必备。
本地处理 · 不上传
加载工具中…
相关：scroll-snap · 吸附 · 滚动 · 轮播 · css
滚动吸附生成器配置吸附轴向、强制程度与对齐位置，生成 scroll-snap 代码，实现轮播与整屏翻页无需 JavaScript。
使用步骤
- 选择吸附方向与对齐方式
- 设置强制或就近吸附
- 预览滚动效果
- 复制生成的 CSS
使用场景
- 制作图片轮播与卡片横滑
- 实现整屏滚动的落地页
- 做移动端的分页浏览
- 让长列表按项对齐停靠
小贴士
- 容器上设 scroll-snap-type，子项上设 scroll-snap-align，两者缺一不可，只写一半是最常见的失效原因。
- `mandatory` 强制吸附到最近的点，内容高于视口时会导致部分内容无法停留查看；`proximity` 只在接近时吸附，更安全。
- 配合 scroll-padding 可以避开固定头部，否则吸附后内容会被顶部导航栏遮住。
常见问题
为什么滚动没有吸附？
检查三点：容器是否有实际滚动（设了 overflow 且内容超出）、容器是否声明了 scroll-snap-type、子项是否声明了 scroll-snap-align。
mandatory 和 proximity 怎么选？
每一屏都恰好等于视口大小时用 mandatory，效果干脆；子项高度不定或超过视口时用 proximity，否则用户会滚不到中间内容。
能替代轮播插件吗？
横滑浏览的场景完全可以，性能还更好。但自动播放、指示点联动、无限循环这些仍需要少量 JavaScript 配合。
滚动吸附生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用滚动吸附生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。