Cómo detectar la dirección de desplazamiento en una página usando JavaScript

A veces es necesario detectar la dirección del desplazamiento vertical en un sitio, por ejemplo, para realizar algunas acciones con el footer o el header. Escribamos un código para determinar la dirección.

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

Para determinar la dirección de desplazamiento horizontal, utilice window.pageXOffset o document.documentElement.scrollLeft.

A veces también utilizo jQuery en algunos proyectos. Escribamos lo mismo utilizando 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
});