无需登录 数据私有 本地保存

滚动捕捉沙盒 - CSS Scroll Snap实验

10
0
0
0
CSS Scroll Snap
实时预览 · 参数可调 · 代码即时生成
滚动方向
强制模式
Mandatory 强制吸附 · Proximity 靠近时吸附
Snap Align
Snap Stop
Always 确保每次滚动都停在吸附点
Scroll Padding
0px
容器内侧偏移，影响吸附位置
子元素数量
6
快速预设
snap-align: start
当前吸附: 元素 #1
生成的 CSS 代码
CSS Scroll Snap 常见问题
什么是 CSS Scroll Snap？它解决了什么问题？
CSS Scroll Snap 是一组CSS属性，用于在滚动容器中创建"吸附点"，使滚动停止时内容能精确对齐到指定位置。它解决了传统轮播图、图片画廊等场景中需要大量JavaScript来实现滚动对齐的问题，提供了更流畅的原生体验和更好的性能。
Mandatory 和 Proximity 有什么区别？
Mandatory（强制）：滚动结束后，浏览器必须停在某个吸附点上，即使用户只滚动了很小的距离。适合需要精确对齐的场景。
Proximity（接近）：只有当滚动停止时靠近某个吸附点才会吸附，如果停在中间位置则保持不动。体验更自然，适合长内容页面。
scroll-snap-align 的 start / center / end 分别代表什么？
start：子元素的起始边缘对齐到容器的起始边缘（考虑scroll-padding）。
center：子元素的中心对齐到容器的中心。
end：子元素的结束边缘对齐到容器的结束边缘。
可以同时设置两个值，如 scroll-snap-align: start center，分别控制块轴和内联轴方向。
scroll-snap-stop: always 有什么作用？
当用户快速滚动（如用力滑动触摸屏）时，normal 模式可能跳过中间的吸附点直接到达最终位置。而 always 模式强制浏览器在第一个遇到的吸附点停止，确保不会跳过任何元素。适合需要逐个浏览的场景，如产品展示。
scroll-padding 的实用场景有哪些？
当页面有固定头部导航栏（如sticky header）时，吸附元素可能被导航栏遮挡。scroll-padding 可以在容器内侧创建偏移，确保吸附元素不被遮挡。它也可以用于在吸附元素周围留出视觉呼吸空间，提升设计美感。
浏览器兼容性如何？
CSS Scroll Snap 在现代浏览器中得到广泛支持：Chrome 69+、Firefox 68+、Safari 11+、Edge 79+。移动端Safari和Chrome都支持良好。对于老旧浏览器，吸附效果会优雅降级为普通滚动，不影响基本功能。建议使用 @supports (scroll-snap-type: y mandatory) 进行特性检测。
🔧 相关工具