窗口滾動只處理一個元素

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

我希望這可以幫助你。