JavaScript轮播组件仅首次点击生效，如何实现每次点击滚动50px？

阿华AIGC实验室

2026-5-7

解决轮播组件点击无累加滚动的问题

你的问题核心在于每次点击都使用固定的绝对偏移量调用scrollTo，而不是基于当前滚动位置进行相对偏移。第一次点击后，滚动位置就固定在-50或50px，后续点击自然不会有变化。下面给你两种实现方案：

基础累加滚动方案

这个方案通过手动维护当前滚动偏移量，每次点击时更新并滚动到新位置：

// 初始化当前滚动偏移量
let currentScroll = 0;
const carousel = document.getElementById("carosello");

function myMoveLeft() {
  // 每次向左滚动时，偏移量减少50px
  currentScroll -= 50;
  carousel.scrollTo(currentScroll, 0);
}

function myMoveRight() {
  // 每次向右滚动时，偏移量增加50px
  currentScroll += 50;
  carousel.scrollTo(currentScroll, 0);
}

如果需要添加边界限制（避免滚出内容范围），可以在更新偏移量前做判断：

function myMoveLeft() {
  // 确保不会滚到内容左侧以外
  if (currentScroll - 50 >= -carousel.scrollWidth + carousel.clientWidth) {
    currentScroll -= 50;
    carousel.scrollTo(currentScroll, 0);
  }
}

function myMoveRight() {
  // 确保不会滚到内容右侧以外
  if (currentScroll + 50 <= 0) {
    currentScroll += 50;
    carousel.scrollTo(currentScroll, 0);
  }
}

带平滑滚动动画的优化方案

如果想要更流畅的滚动体验，可以使用scrollBy方法（基于当前位置的相对滚动），并开启平滑行为：

const carousel = document.getElementById("carosello");

function myMoveLeft() {
  // 相对于当前位置向左滚动50px，开启平滑动画
  carousel.scrollBy({
    left: -50,
    top: 0,
    behavior: 'smooth'
  });
}

function myMoveRight() {
  // 相对于当前位置向右滚动50px，开启平滑动画
  carousel.scrollBy({
    left: 50,
    top: 0,
    behavior: 'smooth'
  });
}

这个方案不需要手动维护偏移量，scrollBy会自动基于当前滚动位置计算新位置，同时behavior: 'smooth'会让滚动过程带有过渡动画，体验更好。