Як визначити напрямок прокручування (скроллу) на сторінці за допомогою JavaScript

Іноді необхідно визначити напрямок вертикальної прокрутки (скроллу) на сайті, наприклад, щоб виконати якісь дії з футером або хедером. Давайте напишемо код для визначення напрямку.

JavaScript

let lastScrollTop = 0; // Store the last scroll position

window.addEventListener("scroll", function () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollTop > lastScrollTop) {
        console.log("Scrolling Down");
    } else if (scrollTop < lastScrollTop) {
        console.log("Scrolling Up");
    }

    lastScrollTop = scrollTop; // Update the last scroll position
});

Щоб визначити напрямок горизонтального прокручування, використовуйте window.pageXOffset або document.documentElement.scrollLeft.

Іноді я також використовую jQuery в деяких проектах. Давайте напишемо те саме за допомогою jQuery

jQuery

let lastScrollTop = 0; // Store the last scroll position

$(window).on('scroll', function(){
    let scrollTop = $(this).scrollTop();

    if (scrollTop > lastScrollTop) {
        console.log("Scrolling Down");
    } else if (scrollTop < lastScrollTop) {
        console.log("Scrolling Up");
    }

    lastScrollTop = scrollTop; // Update the last scroll position
});