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 web para modificar dinámicamente el comportamiento de los elementos de la interfaz. Por ejemplo, esto puede ser útil al trabajar con etiquetas como header o footer, ocultándolas al desplazarse hacia abajo para ahorrar espacio en la pantalla y mostrándolas de nuevo al desplazarse hacia arriba.

La detección de la dirección de desplazamiento también puede mejorar la experiencia del usuario en otros casos, como al activar animaciones, cargar contenido adicional o ajustar los elementos de navegación según la interacción del usuario con la página. Esta técnica se utiliza con frecuencia en las interfaces web modernas para que resulten más receptivas e intuitivas.

La idea básica para detectar la dirección de desplazamiento es comparar la posición actual con la anterior. Al monitorizar cómo cambia este valor a lo largo del tiempo, se puede determinar si el usuario se desplaza hacia arriba o hacia abajo y reaccionar en consecuencia.

En el siguiente ejemplo, implementaremos una solución sencilla que detecta la dirección de desplazamiento utilizando 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
});

Para determinar la dirección de desplazamiento horizontal, utilice window.scrollX 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
});