滚动捕捉实现轮播图。

做轮播图不需要用 JS 一帧帧算 `translateX`——只要给滚动容器加上 `scroll-snap-type`、给每张卡片加上 `scroll-snap-align`，浏览器就会自动把滑动停在整页位置，还自带原生惯性、触摸拖拽和键盘滚动。JS 在这套方案里只剩两个活：点箭头时滚到指定页，以及滚动结束后同步圆点高亮。

三行核心 CSS 就能跑起来

结论：滚动的容器负责"吸附"（snap），容器里的子项负责"被吸附的位置"（align），两者配对才生效，缺一个都不会有吸附效果。

`scroll-snap-type` 是加在滚动容器上的属性，写法是 `scroll-snap-type: x mandatory`，`x` 表示横向吸附，`mandatory` 表示"每次滚动必须停在某个吸附点"。`scroll-snap-align` 是加在每一张卡片上的属性，常见取值 `start`（卡片左边缘对齐容器左边缘）和 `center`（卡片居中）。

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* 老 iOS 惯性滚动 */
  scrollbar-width: none;             /* Firefox 隐藏滚动条 */
}
.carousel::-webkit-scrollbar { display: none; }

.carousel .slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* 快速滑动时不允许一滑跳过好几页 */
}

`scroll-snap-stop: always` 值得单独说一句：默认值 `normal` 下用户用力一甩可能连跳三张，加上它以后每张卡片都"挡"一下，翻页节奏更像传统轮播。

一屏多张、间距怎么处理

结论：一屏显示 N 张时，卡片的 `flex-basis` 必须把间距（gap）算进去，否则吸附点会累积偏移，滚到后面越来越不准。

假设一屏 2 张、间距 12px：

.carousel { gap: 12px; scroll-padding-left: 12px; }
.carousel .slide { flex: 0 0 calc((100% - 12px) / 2); }
.carousel { --per: 3; }
.carousel .slide { flex: 0 0 calc((100% - (var(--per) - 1) * 12px) / var(--per)); }

容器有左右 padding 时，用 `scroll-padding-left` / `scroll-padding-right` 告诉浏览器"吸附点相对留白后再对齐"，不然第一张会被 padding 顶偏。

`mandatory` 和 `proximity` 的选择也有讲究：内容总宽度比容器短时，`mandatory` 会强行把内容吸附、导致滚不动或抖动，这时换成 `proximity`（靠近吸附点才吸），体验更稳。

JS 只剩两件事：跳页和同步圆点

结论：跳页用 `scrollTo` 配合卡片自身的 `offsetLeft` 计算最可靠，圆点同步交给 `IntersectionObserver` 或 `scrollend` 事件。

跳页不要自己乘宽度，直接读卡片位置：

const box = document.querySelector('.carousel');
const slides = [...box.children];

function goTo(i) {
  box.scrollTo({ left: slides[i].offsetLeft - box.offsetLeft, behavior: 'smooth' });
}

圆点同步有两种做法。老牌做法是 `IntersectionObserver` 观察每张卡片，阈值取 `0.6` 左右，谁的交叉比例高谁就是当前页：

const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.intersectionRatio > 0.6) setActive(slides.indexOf(e.target));
  });
}, { root: box, threshold: [0.6] });

slides.forEach(s => io.observe(s));

新做法是监听 `scrollend` 事件（Chrome 114+ 支持），停止滚动时才计算一次 `Math.round(box.scrollLeft / 每页步长)`，性能更好。要兼容旧浏览器，就退回到 `scroll` 事件 + 150ms 防抖。

五个高频坑

结论：scroll-snap 的坑几乎都出在"尺寸不确定"和"吸附太强势"上。

1. 图片未加载导致宽度跳动：给卡片固定 `aspect-ratio` 或写死高度，否则图片撑开后吸附位置全错。
2. `mandatory` 卡死滚动：内容不足一屏时尤其明显，改 `proximity`。
3. `scrollIntoView` 带偏整页：没有横向滚动祖先时它可能滚动外层页面，优先用容器的 `scrollTo`。
4. 无障碍缺失：容器加 `aria-roledescription="carousel"`，箭头按钮写清 `aria-label="上一张"`，并支持左右方向键。
5. 忽略减弱动效偏好：`@media (prefers-reduced-motion: reduce) { .carousel { scroll-behavior: auto; } }`，别让晕动症用户被迫看平滑滚动。

什么时候该放弃这套方案

结论：需要无限循环、自动播放进度条、或"3D 翻转"这类复杂过渡时，scroll-snap 就不是最优解。

scroll-snap 的本质是"原生滚动 + 对齐约束"，它天然擅长图片/卡片浏览这类场景，移动端手感比 JS transform 方案好得多。但它没有真正的无限循环（首尾要复制克隆节点），自动播放要靠 `setInterval` 调 `scrollTo` 且用户手动滑动时得暂停——需求一旦超过这个复杂度，老老实实上 Swiper 更省事。

总的来说：一屏一张或几张、以浏览翻页为主的轮播，优先用 `scroll-snap-type` + `scroll-snap-align` 两行 CSS 打底，注意间距写进 `flex-basis`、谨慎使用 `mandatory`、跳页用 `offsetLeft`、同步用 `IntersectionObserver` 或 `scrollend`，就能用几十行代码做出比多数轮播库更顺滑的效果。