L-05

滚动捕捉

Scroll Snap

滚动停下来时自动对齐到某一张卡片，不会卡在半路上。

又叫：
滚动吸附
滑动吸附
对齐滚动
scroll snapping
snap scrolling
scroll-snap-type

展厅: 布局与结构
形态: 自带滚动
播放: 手动触发
关键词: 纯 CSS / 随滚动变化 / 可以直接用

↕ 自己动手试试

L-05形态自带滚动播放手动触发Scroll Snap

参数工作台

吸附强度吸附内边距12px对齐位置防止一次跳多张

复制给 AI

随参数实时更新

做一个横向滚动的卡片选择器：滚动容器用 scroll-snap-type: x mandatory，子项用 scroll-snap-align: start，容器加 scroll-padding: 12px，子项加 scroll-snap-stop: always，防止一次滑动跳过好几张。容器自身要有固定高度和 overflow-x: auto，让原生惯性和键盘滚动都可用。系统开启「减少动态效果」时 scroll-behavior 用 auto。

什么时候用

横向轮播、图片画廊，每次滑一张
全屏分页的落地页，一屏一段内容
移动端的步骤条、日期选择器、卡片选择器，要「滑到哪个就是哪个」

适用场景：滚动 / 导航 / 卡片

别搞混

和「轮播 carousel」的区别
轮播用 JS 定时切页，用户只能点箭头；scroll-snap 用的是原生滚动容器，惯性、拖动、触控板、键盘全都交给浏览器，代码只规定「停在哪」。
和「scroll-behavior: smooth」的区别
smooth 管的是「跳转过程怎么滑过去」；snap 管的是「滑完最终停在哪里」，两者互不替代。

容易踩的坑

scroll-snap-type 要写在滚动容器上，scroll-snap-align 写在子项上，写反了完全没反应
容器必须有确定的尺寸和 overflow，内容比容器还短就没有可滚动的余量，自然也谈不上吸附
mandatory 用在内容高于视口的纵向区域会「锁屏」，用户滚不到底部，长内容要用 proximity
子项比容器还大时，align: start 会让尾部内容永远露不出来
吸附位置的内边距靠容器的 scroll-padding，给子项加 margin 不算数

无障碍降级

吸附本身不是动画，不用关；但用 scroll-behavior: smooth 滚到某一张时，prefers-reduced-motion: reduce 下应改回 auto，直接跳过去。

关键词

scroll-snap-type
scroll-snap-align
scroll-snap-stop
scroll-padding
overscroll-behavior
mandatory vs proximity