滚动吸附轮播组件（scroll-snap 卡片轮播，吸附强度/自动播放可调）

效果演示（真实可交互）

完整代码

核心思路：容器开启 overflow-x: auto 与 scroll-snap-type: x mandatory，每张卡片设置 scroll-snap-align: start，浏览器即可在滚动停止时自动吸附到最近的卡片边缘，完全无需 JS 计算位移。

<div class="carousel" id="carousel">
  <section class="card"><b>第 1 张</b><p>滚动吸附轮播</p></section>
  <section class="card"><b>第 2 张</b><p>纯 CSS 吸附</p></section>
  <section class="card"><b>第 3 张</b><p>零依赖</p></section>
</div>

.carousel {
  overflow-x: auto;                 /* 横向滚动容器 */
  scroll-snap-type: x mandatory;    /* 强制吸附；proximity 为就近吸附 */
  scrollbar-width: none;            /* 隐藏滚动条，保持视觉干净 */
  display: flex;
  gap: 16px;
}
.card {
  flex: 0 0 248px;
  scroll-snap-align: start;         /* 吸附对齐点：卡片左缘 */
  border-radius: 16px;
  padding: 22px;
  background: linear-gradient(150deg, #6c8cff, #a96cff);
  color: #fff;
}

// 箭头导航：按固定步长（卡片宽 + 间距）滚动
const view = document.getElementById('carousel');
const STEP = 264;
document.getElementById('next').addEventListener('click', () => {
  view.scrollTo({ left: view.scrollLeft + STEP, behavior: 'smooth' });
});
// 圆点指示：滚动时用 rAF 节流计算当前卡片序号
view.addEventListener('scroll', () => {
  requestAnimationFrame(() => {
    const idx = Math.round(view.scrollLeft / STEP);
    dots.forEach((d, i) => d.classList.toggle('is-active', i === idx));
  });
});

参数说明

兼容性与性能

• 核心依赖 scroll-snap，Chrome 69+、Safari 11+、Firefox 68+、Edge 全系支持，旧浏览器退化为普通横向滚动，不影响阅读
• 吸附与平滑滚动均由浏览器原生合成器处理，比 JS 逐帧位移动画更省电、更流畅
• 滚动监听采用 rAF 节流，圆点更新不会造成布局抖动
• 演示使用内嵌滚动容器（overflow-x: auto），无需整页滚动即可预览效果
• 隐藏滚动条后请保留键盘可操作性：容器可聚焦后使用方向键滚动

常见问题

Q: 为什么卡片没有吸附效果？ 常见原因是父级容器未设 overflow-x: auto，或吸附属性写在了卡片而非容器上。请确认 scroll-snap-type 在滚动容器上、scroll-snap-align 在子卡片上，且卡片不是 position: fixed。

Q: mandatory 和 proximity 怎么选？ 浏览器的相册、轮播场景用 mandatory 体验更干脆；内容较长、需要中途停留阅读时用 proximity 更宽松，不会强迫手指「贴边」。

Q: 自动轮播在移动端卡顿或跳帧？ 自动轮播走 scrollTo({ behavior: 'smooth' })，滚动由浏览器接管，通常不卡。若在低端机出现丢帧，可适当加大轮播间隔，或改用 behavior: 'auto' 配合 CSS scroll-behavior: smooth。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，可自由改色、改卡片数量与吸附模式。