如何延迟“轮子”事件？

Question

所以我有这段代码，在使用鼠标滚轮或触摸板时将视图更改为部分数组中的下一个 div。但是，当我使用触摸板时，它无法正常工作，因为每次滚动时索引都会发生变化。如何添加延迟，以便每次使用鼠标滚轮或触摸板都算作一次滚动。有什么建议吗？

const MainNavigation = () => {
  let index = 0;
  window.addEventListener("wheel", function (event) {
    if (event.deltaY < 0) {
      --index;
    } else if (event.deltaY > 0) {
      ++index;
    }
    scrollToSection();
  });
  const scrollToSection = () => {
    if (index < 0 || index > 2) {
      index = 0;
    }
    console.log(index);
    sections[index].scrollIntoView({ behavior: "smooth" });
  };
};

Answer 1

let sum = 0
div1.addEventListener('wheel', (e) => {
   console.log(e.deltaY)
   sum += e.deltaY
   div2.scrollTo(0, Math.floor(sum / 100) * 100)
})

let sum3 = 0;
div3.addEventListener('wheel', (e) => {
   e.preventDefault()
   console.log(e.deltaY)
   sum3 += e.deltaY
   div3.scrollTo(0, Math.floor(sum3 / 100) * 100)
})

* {
  border: 1px solid black;
}
[h100] {
  height: 100px;
}
[w100] {
  width: 100px;
}
#div1, #div2, #div3 {
  max-height: 300px;
  overflow-y: scroll;
  display: inline-block
}

<div id="div1">
<div h100 w100> 100 </div>
<div h100 w100> 200 </div>
<div h100 w100> 300 </div>
<div h100 w100> 400 </div>
<div h100 w100> 500 </div>
<div h100 w100> 600 </div>
<div h100 w100> 700 </div>
<div h100 w100> 800 </div>
<div h100 w100> 900 </div>
</div>

<div id="div2">
<div h100 w100> 100 </div>
<div h100 w100> 200 </div>
<div h100 w100> 300 </div>
<div h100 w100> 400 </div>
<div h100 w100> 500 </div>
<div h100 w100> 600 </div>
<div h100 w100> 700 </div>
<div h100 w100> 800 </div>
<div h100 w100> 900 </div>
</div>

<div id="div3">
<div h100 w100> 100 </div>
<div h100 w100> 200 </div>
<div h100 w100> 300 </div>
<div h100 w100> 400 </div>
<div h100 w100> 500 </div>
<div h100 w100> 600 </div>
<div h100 w100> 700 </div>
<div h100 w100> 800 </div>
<div h100 w100> 900 </div>
</div>