CSS scroll-snap 滚动捕捉生成器
可视化生成 CSS scroll-snap 滚动捕捉：完整支持容器属性
（scroll-snap-type 轴向与严格度、scroll-padding、overflow）
与子项属性（scroll-snap-align、scroll-snap-stop、
scroll-margin）。可实际滚动的预览区真实体验捕捉效果，点击子项即可独立编辑，
实时预览，一键复制 CSS 代码。内置横向轮播、全屏滚动、图片画廊、分页、卡片滑动、时间线、
网格、自由 8 组预设。适用于轮播图、全屏滚动、图片画廊、分页导航等前端开发场景。所有处理在浏览器本地完成。
容器属性
点击预览区子项编辑属性
/* 滚动容器 */
.scroll-container {
overflow: auto hidden;
scroll-snap-type: x mandatory;
}
/* 子项 */
.item {
width: 240px;
scroll-snap-align: center;
}常见问题
什么是 scroll-snap？它解决了什么问题？
scroll-snap 是 CSS 的滚动捕捉模块，让滚动容器在滚动停止时自动"吸附"到指定的对齐位置。
它解决了传统滚动体验的两大痛点：一是滚动停止位置随意，用户需要手动微调才能对齐内容；
二是轮播、分页等场景需要 JavaScript 监听 scroll 事件并手动计算位置，性能差且体验生硬。
使用 scroll-snap 只需在容器上设置 scroll-snap-type，在子项上设置
scroll-snap-align，浏览器原生处理捕捉，零 JavaScript、高性能、丝滑流畅。
scroll-snap-type 的 axis（x/y/both）和 strictness（mandatory/proximity）分别是什么含义？
scroll-snap-type 由两部分组成：轴（axis）和严格度（strictness）。
轴：x 仅横向滚动时捕捉，y 仅纵向滚动时捕捉，
both 横纵向都捕捉（用于网格布局）。
严格度：mandatory（强制）表示滚动停止后必须吸附到最近的捕捉点，
即使用户只滚动了一点也会被"拉"过去，适合轮播、分页等需要精确对齐的场景；
proximity（就近）表示仅在接近捕捉点时才吸附，离得远则保持自由滚动，体验更自然，
适合长列表、时间线等场景。
语法：scroll-snap-type: x mandatory; 或 scroll-snap-type: y proximity;。
scroll-snap-align 的 start、center、end 有什么区别？
scroll-snap-align 设置在子项上，决定子项如何对齐到滚动容器的捕捉点：
start：子项的起始边（横向为左边，纵向为顶部）对齐到容器的起始边。
适合分页滚动、全屏滚动、时间线。
center：子项中心对齐到容器中心。适合轮播图、图片画廊、卡片滑动。
end：子项的结束边对齐到容器的结束边。较少单独使用，常用于反向滚动场景。
none：该子项不作为捕捉点，滚动时不会被吸附。用于某些不需要捕捉的中间项。
注意：scroll-snap-align 只决定"对齐到哪"，scroll-snap-type 才决定"是否捕捉"。
没有设置 snap-align 的子项不会成为捕捉点。
scroll-snap-stop 的 normal 和 always 有什么区别？什么时候用 always？
scroll-snap-stop 控制滚动时是否允许"跳过"中间的捕捉点：
normal（默认）：快速滚动时可以跳过中间的捕捉点，直接吸附到终点附近的捕捉点。
这是大多数场景的默认行为，体验流畅。
always：每次滚动都必须停在下一个捕捉点，不能跳过。
适合全屏滚动、分页等需要"一页一页翻"的场景，防止用户快速滑动跳过多页。
例如：5 个全屏分页，normal 模式下快速滑动可能从第 1 页直接到第 4 页；
always 模式下每次滑动只能到下一页（第 1→2→3→4→5），保证用户不会错过中间内容。
scroll-padding 和 scroll-margin 的作用是什么？
两者用于在捕捉点与容器边缘之间预留间距，避免子项紧贴容器边缘：
scroll-padding：设置在容器上，为所有捕捉点统一预留间距。
例如 scroll-padding: 20px 让所有子项在捕捉时与容器边缘保持 20px 距离。
常用于固定头部（sticky header）下方留出空间，避免子项被头部遮挡。
scroll-margin：设置在子项上，为单个子项独立预留间距。
例如不同子项可以有不同的 scroll-margin，实现错落有致的捕捉效果。
两者的关系类似 padding 与 margin：scroll-padding 是容器的"内边距"，
scroll-margin 是子项的"外边距"，最终捕捉间距是两者之和。
mandatory 和 proximity 应该选哪个？
选择依据是场景对"精确对齐"的要求程度：
mandatory（强制）：滚动停止后必须吸附到捕捉点。
适合需要精确对齐的场景：轮播图、分页滚动、全屏滚动、图片画廊。用户不会停在两个子项中间的尴尬位置。
注意：mandatory 模式下若子项比容器大，可能导致用户无法滚动到子项末尾内容（被强制吸附回起点）。
proximity（就近）：仅在接近捕捉点时才吸附，离得远则自由滚动。
适合内容浏览场景：长列表、时间线、信息流。用户可以自由浏览任意位置，仅在接近时"顺带"吸附。
经验法则：需要"一屏一屏翻"用 mandatory，需要"自由浏览"用 proximity。
scroll-snap 与 overflow 的关系是什么？必须设置 overflow 吗？
是的，scroll-snap 依赖 overflow 滚动。scroll-snap-type 只在可滚动容器上生效，
容器必须设置 overflow: auto、overflow: scroll 或 overflow-x/y 为
auto/scroll 才能滚动，scroll-snap 才能捕捉。
横向滚动：overflow-x: auto; overflow-y: hidden;
纵向滚动：overflow-y: auto; overflow-x: hidden;
双向滚动：overflow: auto;（两个方向都可滚动）
注意：若容器内容不超出容器尺寸，则不会产生滚动条，scroll-snap 也就无法触发。
因此子项总尺寸必须大于容器尺寸（横向时子项总宽度 > 容器宽度，纵向时子项总高度 > 容器高度）。
本工具的预览区已正确配置 overflow，切换轴时自动调整 overflow 方向。
scroll-snap 的浏览器兼容性和性能如何？
浏览器兼容性：scroll-snap 在 Chrome 69+、Firefox 65+、Safari 11+（带 -webkit- 前缀）
全面支持，覆盖 95%+ 的现代浏览器。iOS Safari 在 11+ 支持，移动端体验良好。
旧版浏览器不支持时降级为普通滚动，不影响功能可用性。
性能：scroll-snap 由浏览器原生处理，不依赖 JavaScript，
滚动捕捉在合成层完成，性能远优于 JS 监听 scroll + 手动计算方案。
即使有数十个子项也不会有性能问题，因为浏览器只捕捉可见区域附近的捕捉点。
无障碍：scroll-snap 不影响键盘导航，Tab 键仍可聚焦到容器内的子项。
屏幕阅读器会正常朗读子项内容，捕捉行为对辅助技术透明。
本工具：所有处理在浏览器本地完成，零上传、零追踪、零广告。