所以我有这段代码,在使用鼠标滚轮或触摸板时将视图更改为部分数组中的下一个 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" });
};
};
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>