How to Determine the Scroll Direction Using jQuery?

Learn how to determine the direction in which the user is scrolling. This can be useful to show a sticky navigation menu when scrolling back to top, or showing a popup when scrolling down to a specific part of the page. Using the same technique we will also look at how to detect the horizontal scroll direction.

Detect Vertical Scroll Direction

The idea behind it is very simple, we keep record of last scroll and compare it with the current scrolled position, updating it as we scroll around. Consider the code below:

// element to detect scroll direction of
const $el = $(window);

// initialize last scroll position
let lastY = $el.scrollTop();
    
$el.on('scroll', function() {
    // get current scroll position
    const currY = $el.scrollTop();
        
    // determine current scroll direction
    const y = (currY > lastY) ? 'down' : ((currY === lastY) ? 'none' : 'up');

    // do something here...
    console.log(y);

    // update last scroll position to current position
    lastY = currY;
});

Notice how the last scroll position lastY is initialized to initial window scroll position. This is so because at times when a web page is refreshed or a link to the page makes it scroll to a certain element on the page, this code will take that into account when determining the scroll direction.

Detect Horizontal Scroll Direction

To detect horizontal scroll direction we just need to make a few changes to the vertical scroll direction code:

// element to detect scroll direction of
const $el = $(window);

// initialize last scroll position
let lastX = $el.scrollLeft();
    
$el.on('scroll', function() {
    // get current scroll position
    const currX = $el.scrollLeft();
        
    // determine current scroll direction
    const x = (currX > lastX) ? 'right' : ((currX === lastX) ? 'none' : 'left');

    // do something here...
    console.log(x);

    // update last scroll position to current position
    lastX = currX;
});

Detect Horizontal & Vertical Scroll Direction

Scroll Direction of Document Window:

If we were to detect both horizontal and vertical scroll on a web page, we can combine the code for horizontal and vertical scroll direction like so:

// element to detect scroll direction of
const $el = $(window);

// initialize last scroll position
const lastPos = { x: $el.scrollLeft(), y: $el.scrollTop() };

$el.on('scroll', function() {
    // get current scroll position
    const currY = $el.scrollTop();
    const currX = $el.scrollLeft();
        
    // determine current scroll direction
    const currDir = {
        x: (currX > lastPos.x) ? 'right' : ((currX === lastPos.x) ? 'none' : 'left'),
        y: (currY > lastPos.y) ? 'down' : ((currY === lastPos.y) ? 'none' : 'up'),
    };

    // do something here...
    console.log(currDir);

    // update last scroll position to current position
    lastPos.y = currY;
    lastPos.x = currX;
});

Scroll Direction of Scrollable HTML Elements on the Page:

In all the code snippets above we're checking for the scroll direction on the browser window, we can use the same code to detect scroll direction of any element on the page that is scrollable. To do that we need to simply:

1. Change $el = $(window) to the selector of another element on the page.
2. Set CSS width, height and overflow properties on the element to make it scrollable.
3. Have enough content to make the element scrollable.

For example, consider the following:

HTML:

<div id="scrollable">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis magna vel libero semper, nec auctor turpis semper. Fusce sed purus vel massa fermentum cursus.
    </p>
    <p>
        Donec interdum commodo libero non sodales. Proin quis luctus ligula, ac laoreet tellus. Quisque non ante dictum, rhoncus odio eu, mattis enim. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <p>
        Etiam sodales lectus eget velit feugiat imperdiet. Duis nisi sapien, fermentum eget nunc sit amet, lacinia ultrices neque. Fusce ut nunc ut odio laoreet rhoncus dictum in mauris. Suspendisse lobortis venenatis nisi, in accumsan nisl. Aliquam eu ornare ex, sed fringilla sapien. Donec maximus turpis pellentesque augue euismod accumsan.
    </p>
</div>

CSS:

#scrollable {
    width: 100px;
    height: 100px;
    white-space: nowrap;
    overflow: auto;
}

jQuery:

// element to detect scroll direction of
const $el = $('#scrollable');

// initialize last scroll position
const lastPos = { x: $el.scrollLeft(), y: $el.scrollTop() };
    
$el.on('scroll', function() {
    // get current scroll position
    const currX = $el.scrollLeft();
    const currY = $el.scrollTop();
        
    // determine current scroll direction
    const currDir = {
        x: (currX > lastPos.x) ? 'right' : ((currX === lastPos.x) ? 'none' : 'left'),
        y: (currY > lastPos.y) ? 'down' : ((currY === lastPos.y) ? 'none' : 'up'),
    };

    // do something here...
    console.log(currDir);

    // update last scroll position to current position
    lastPos.y = currY;
    lastPos.x = currX;
});