javascript - 仅在一个元素上工作来滚动窗口

Question

我想知道是否有人可以帮助我更改此代码以使其重置或使用多个元素？

在下面的网站上，我将此脚本设置为向右滚动 100vw 使用 window.scrollBy(window.innerWidth /1, 0); 当紫色框悬停在上方时。

但是我希望它可以与多个实例一起使用，并且似乎无法使其正常工作。有人可以帮助我吗？

这是我的脚本；

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
    });
}

我希望这可以帮助你。