滚动吸附
Scroll Snap
初级通用滚动吸附（Scroll Snap）是让滚动停下时自动对齐到指定位置的 CSS 功能。横着滑轮播卡片，松手后正好停在一张卡片上，而不是卡在两张中间。只要在容器和子元素上各写一行 CSS，不需要 JavaScript 计算。
你可能会说：「手机上横着滑的推荐卡片，松手后总是停在两张中间，能不能自动对齐到一张？」
读之前建议先了解
动手看看松手就对齐
要点滚动吸附是怎样起作用的？
- 1
容器定规则，子元素定对齐点
在滚动容器上写 scroll-snap-type: x mandatory，表示横向滚动、停下时必须对齐；在每张卡片上写 scroll-snap-align: start 或 center，表示用卡片的开头或中间去对齐。两者缺一不可，只写容器不写子元素是最常见的「写了没效果」。如果容器有内边距或者被固定的标题挡住，用 scroll-padding 告诉浏览器对齐时留出多少空间。
- 2
mandatory 和 proximity
mandatory 是「停下时一定要对齐到某个吸附点」，适合轮播这种每次都该停在一张卡片上的场景。proximity 是「只在停得离吸附点比较近时才吸过去」，用户停在中间也不管，比较温和。左右翻页按钮只需要 scrollBy 一张卡片的宽度，最终对齐交给浏览器。
- 3
小心比视口还高的内容
竖向整屏吸附（每段一屏的介绍页）最容易踩的坑是：某一段内容比屏幕还高时，mandatory 会在你想往下看的时候把你拽回段首或直接甩到下一段，那一段的下半截很难看到。内容高度不固定的页面，用 proximity，或者干脆不要做整屏吸附。
容易混淆的地方
滚动吸附只决定「停在哪」，不改变滚动本身的速度和手感，和平滑滚动（scroll-behavior: smooth）是两回事。它也不是轮播组件：自动播放、无限循环、指示点这些功能仍然要自己实现，吸附只负责对齐。和粘性定位也不同，粘性定位是让某个元素在滚动时停留在某处，吸附是让整个滚动位置对齐。
什么时候用
适合用
- 电商首页或 App 里横向滑动的推荐卡片，松手后对齐到一张。
- 手机上的图片画廊，每次滑动正好切换一张图。
- 内容固定的产品介绍页，每段一屏，滚一下翻一页。
不适合用
- 长文章、文档这类连续阅读的页面，别加吸附；会打断用户的阅读节奏。
- 某段内容比屏幕还高时，别对整页用 mandatory 吸附；用 proximity 或不吸附。
- 需要自动播放、无限循环的复杂轮播，别指望靠吸附实现全部功能；吸附只负责对齐。
练一练选一个答案，看看解释
你给横向推荐卡片的容器写了 scroll-snap-type: x mandatory，但滑动后还是停在两张卡片中间。最可能漏了什么？
让 AI 帮你做复制给 AI Agent 直接用
请给【可滚动的区域，如：首页横向滑动的推荐卡片列表】加上滚动吸附。先阅读这个组件，弄清滚动发生在哪个容器、有没有用 JavaScript 计算对齐或第三方轮播库。要求：容器写 scroll-snap-type（横向轮播用 x mandatory），每张卡片写 scroll-snap-align，容器有内边距或被遮挡时用 scroll-padding 对齐；左右按钮改为 scrollBy 一张卡片宽度；去掉可以被 CSS 替代的对齐脚本。如果是竖向整屏吸附，内容可能比视口还高的区段要用 proximity。不改无关代码。最后说明怎样在手机和触控板上验证：松手后总是停在一张卡片上，长内容也能完整看到。