使用scrollLeft属性实现水平滚动失效问题求助

我知道已有类似问题，但现有解答解决不了我的情况。我正在从零构建一个基于wheel事件的水平滑块，改用scrollLeft属性替代之前调整margin-left的不良实践，但现在滑块完全没动，虽然this.scrollDistance确实在累加。

我的代码 #

HTML #

<div class="slide-container">
   <div class="frontpage-slider--elem"></div>
   <div class="frontpage-slider--elem"></div>
   <div class="frontpage-slider--elem"></div>
   <div class="frontpage-slider--elem"></div>
   <div class="frontpage-slider--elem"></div>
</div>

CSS #

.slide-container {
    display: flex;
    overflow: scroll;
    white-space: nowrap;
}

.frontpage-slider--elem {
    margin-right: 30px;
    width: 400px;
    height: 550px;
    background-color: grey;
}

JavaScript #

class Slider {
  constructor(sliderContainer, sliderElements) {
    this.sliderContainer = sliderContainer;
    // 此处未初始化scrollDistance
  }

  scroll(event) {
    if (event.deltaY > 0) {
        event.preventDefault()
        this.scrollDistance += 25;

        this.sliderContainer.scrollLeft += this.scrollDistance
        console.log(this.sliderContainer.scrollLeft += this.scrollDistance)
    }
  }
}

const sliderContainer = document.querySelector('.slide-container');
const sliderElements = document.querySelectorAll('.frontpage-slider--elem');
const slider = new Slider(sliderContainer, sliderElements)

sliderContainer.addEventListener("wheel", (event) => {
    slider.scroll(event);
})

问题排查与修复 #

你的代码里有两个核心问题：

• scrollDistance未初始化：如果构造函数里没给this.scrollDistance赋初始值，第一次执行this.scrollDistance +=25会得到NaN，直接导致scrollLeft赋值失败，滑块自然不动。
• 重复修改scrollLeft：你在赋值scrollLeft后，又在console.log里重复执行了一次this.sliderContainer.scrollLeft += this.scrollDistance，这会导致数值异常，且完全没必要。

另外，持续累加scrollDistance的设计也不合理——每次滚轮触发都让步长变大，滚动会越来越快，不符合常规滑块的交互逻辑。

修复后的代码 #

class Slider {
  constructor(sliderContainer) {
    this.sliderContainer = sliderContainer;
    this.scrollStep = 25; // 固定单次滚动步长
  }

  scroll(event) {
    event.preventDefault(); // 统一阻止默认垂直滚动行为
    // 根据滚轮方向调整scrollLeft
    if (event.deltaY > 0) {
      this.sliderContainer.scrollLeft += this.scrollStep;
    } else {
      // 支持向上滚轮反向滚动
      this.sliderContainer.scrollLeft -= this.scrollStep;
    }

    // 限制滚动范围，避免超出滑块边界
    const maxScroll = this.sliderContainer.scrollWidth - this.sliderContainer.clientWidth;
    this.sliderContainer.scrollLeft = Math.max(0, Math.min(this.sliderContainer.scrollLeft, maxScroll));
  }
}

const sliderContainer = document.querySelector('.slide-container');
const slider = new Slider(sliderContainer);

sliderContainer.addEventListener("wheel", (event) => {
  slider.scroll(event);
});

关键改进点 #

• 初始化固定的scrollStep，每次滚动使用固定步长，逻辑更稳定。
• 支持滚轮双向滚动，提升交互体验。
• 增加滚动范围限制，防止滑块滚出边界。
• 统一阻止默认滚轮行为，避免页面跟着滚动。

内容的提问来源于stack exchange，提问作者Lukoooooooooo