Как остановить автоматический скролл при нажатии мышки?

Question

Помогите пожалуйста. У меня есть кнопка плавной прокрутки страницы на сайте. Её код:

let scrollBtn = document.querySelector("#scroll-btn")

for (let link of document.querySelectorAll('a[href^="#"]')) {
    link.addEventListener('click', function (e) {
        e.preventDefault();
        let item = link.getAttribute('href');

        document.querySelector(item).scrollIntoView({
            block: "center",
            behavior: "smooth"
        })
    })
}

Возможно ли это сделать на чистом JS, без использования JQuery? Я нуб.

Answer 1

Я думаю ваша прокрутка должна остановится, если задать новую.
Попробуйте выполнять window.scrollTo( window.scrollX, window.scrollY ); при клике.

Возможно, будет правильнее вместо окна использовать родительский элемент item.parentNode.scrollTo( window.scrollX, window.scrollY ); так как scrollIntoView прокручивает именно его. Попробуйте оба варианта

link.addEventListener('click', function (e) {
    e.preventDefault();
    let item = link.getAttribute('href');

    document.querySelector(item).scrollIntoView({
        block: "center",
        behavior: "smooth"
    });

    const stopScroll = () => item.parentNode.scrollTo( window.scrollX, window.scrollY );
    document.body.addEventListener("click", () => stopScroll(), {once: true});

})

БЛОГ НА HUSL

Как остановить автоматический скролл при нажатии мышки?

Ответы (1 шт):