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

Іноді необхідно визначити напрямок вертикального прокручування (скроллу) на веб-сайті, щоб динамічно змінювати поведінку елементів інтерфейсу. Наприклад, це може бути корисним під час роботи з елементами header або footer — приховування їх під час прокручування вниз для економії місця на екрані та відображення їх знову, коли користувач прокручує вгору.

Виявлення напрямку прокручування також може покращити взаємодію з користувачем в інших сценаріях, таких як запуск анімації, завантаження додаткового контенту або налаштування елементів навігації залежно від того, як користувач взаємодіє зі сторінкою. Цей метод часто використовується в сучасних веб-інтерфейсах, щоб зробити їх більш адаптивними та інтуїтивно зрозумілими.

Основна ідея визначення напрямку прокручування полягає в порівнянні поточної позиції прокручування з попередньою. Відстежуючи, як це значення змінюється з часом, можна визначити, чи прокручує користувач вгору чи вниз, і відповідно реагувати.

У наступному прикладі ми реалізуємо просте рішення, яке визначає напрямок прокручування за допомогою JavaScript.

JavaScript

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

window.addEventListener("scroll", function () {
    let scrollTop = window.scrollY || 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.scrollX або 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
});