How to Detect Scroll Direction on a Page Using JavaScript

Sometimes it is necessary to detect the direction of vertical scrolling on a site, for example, to perform some actions with the footer or header. Let’s write code to determine the direction.

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

To determine the horizontal scroll direction, use window.pageXOffset or document.documentElement.scrollLeft.

I sometimes also use jQuery in some projects. Let’s write the same thing using 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
});