只在一个元素上滚动窗口

Question

我想知道是否有人能帮我修改这段代码，使其重置或与多个元素一起工作？

在下面的网站上，我设置了这个脚本，使用window.sollBy(window.innerWidth/1,0(向右滚动100vw；当紫色的盒子悬停在上面时。

然而，我希望它能与多个实例一起工作，但似乎无法使其工作。有人能帮我吗？

这是我的剧本；

let button = document.getElementById("mybutton");
button.addEventListener("mouseover", () => {
window.scrollBy(window.innerWidth /1, 0); 
});

她的网址是：https://ba-site-build.webflow.io/builds/dev-1-hover-slider.

如果有人能提供这么多帮助，我将不胜感激！

谢谢：(

Answer 1

问题是元素的id必须是唯一的，因此您可以在脚本循环中使用class来覆盖元素，并为所有元素添加事件侦听器。

HTML:

<div class="horizontal">
<div class="red">
<div class="scrollThis button">
<div class="purple"></div>
</div>
</div>
<div class="red">
<div class="scrollThis button">
<div class="purple"></div>
</div>
</div>
<div class="yellow"></div>
</div>

JS:

let buttons = document.getElementsByClassName("scrollThis");
for (let item of buttons) {
item.addEventListener("mouseover", () => {
window.scrollBy(window.innerWidth /1, 0); // <-- you can change this amount if you need more than 120px
});
}

我希望这对你有帮助。