水平滚动与scrollLeft不起作用

Question

在我解释问题之前：我知道有人问了一个非常相似的问题，但我无法用那些人的回答来解决它。 :/

我正在尝试使用“滚轮”事件从头开始构建水平滑块。

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：（它在一个类中，我正在使用“滚动”方法。

   ...

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

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

           }
       }

   ...

const slider = new Slider(sliderContainer, sliderElements)

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

滑块是可滚动的，它与 margin-left 一起使用并将其减去 25px，但我认为这是不好的做法，所以我尝试使用scrollLeft，但我不知道可能会导致它的原因。

this.scrollDistance

确实会累加，但滑块不会移动一英寸。 也许我有一个思维错误，但我自己无法弄清楚。

提前致谢！

Answer 1

您的滑块容器不会引入可滚动区域，而不会阻止 Flex 子元素的增长或收缩。

尝试这样的事情

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

sliderContainer.addEventListener("wheel", (event) => {
  let deltaY =event.deltaY;
  sliderContainer.scrollLeft += deltaY;
})

.slide-container {
  display: flex;
  overflow: scroll;
  flex-wrap: nowrap;
  gap: 30px;
}

.frontpage-slider--elem {
  flex: 0 0 auto;
  width: 400px;
  height: 550px;
  background-color: grey;
}

<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>

基本上，您可以通过应用来防止自动宽度调整

flex-wrap: nowrap

到父滑块容器
和

flex: 0 0 auto

到滑块（弹性）项目。
此外，您可以在 Flex 布局上下文中使用

gap

代替

margin

。