Прокрутка окна, работая только над одним элементом

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.

i был бы очень признателен, если кто-нибудь может предложить любую помощь так много!

Спасибо:)

Answer 1

Проблема в том, что id элементов должен быть уникальным, поэтому вы можете использовать класс вместо скрипта l oop над элементами и добавить прослушиватель событий для всех них.

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

Надеюсь, это поможет вам.