How to detect the Scroll direction using JavaScript

# Table of Contents

# How to detect the Scroll direction using JavaScript

To detect the scroll direction using JavaScript:

Set the scroll event on the window or the specific element within which the user scrolls.
If the current scrollTop position is greater than the last scrollTop position, then the user is scrolling down.
If the current scrollTop position is less than the last scrollTop position, then the user is scrolling up.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <h3>
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com
    </h3>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
let lastScrollTop =
  window.pageYOffset || document.documentElement.scrollTop;

window.addEventListener(
  'scroll',
  function handleScroll() {
    const scrollTopPosition =
      window.pageYOffset || document.documentElement.scrollTop;

    if (scrollTopPosition > lastScrollTop) {
      console.log('scrolling down');
    } else if (scrollTopPosition < lastScrollTop) {
      console.log('scrolling up');
    }
    lastScrollTop =
      scrollTopPosition <= 0 ? 0 : scrollTopPosition;
  },
  false,
);

detect scroll direction using javascript

The code for this article is available on GitHub

The window.pageYOffset property is an alias for scrollY.

The following code sample is equivalent to the one above but uses window.scrollY instead of window.pageYOffset.

index.js

Copied!
let lastScrollTop =
  window.scrollY || document.documentElement.scrollTop;

window.addEventListener(
  'scroll',
  function handleScroll() {
    const scrollTopPosition =
      window.scrollY || document.documentElement.scrollTop;

    if (scrollTopPosition > lastScrollTop) {
      console.log('scrolling down');
    } else if (scrollTopPosition < lastScrollTop) {
      console.log('scrolling up');
    }
    lastScrollTop =
      scrollTopPosition <= 0 ? 0 : scrollTopPosition;
  },
  false,
);

The window.scrollY property on the window object returns the number of pixels that the document is currently scrolled vertically.

A value of 0.0 indicates that the top edge of the document is currently aligned with the top edge of the window's content area.

The scrollTop property is used to get or set the number of pixels that the element's content is scrolled vertically.

We use the logical OR (||) operator to set the scrollTop property as a fallback in case window.scrollY is undefined.

We used the addEventListener() method to add a scroll event listener to the window object.

The scroll event is triggered when the document view has been scrolled.

index.js

Copied!
let lastScrollTop =
  window.scrollY || document.documentElement.scrollTop;

window.addEventListener(
  'scroll',
  function handleScroll() {
    const scrollTopPosition =
      window.scrollY || document.documentElement.scrollTop;

    if (scrollTopPosition > lastScrollTop) {
      console.log('scrolling down');
    } else if (scrollTopPosition < lastScrollTop) {
      console.log('scrolling up');
    }
    lastScrollTop =
      scrollTopPosition <= 0 ? 0 : scrollTopPosition;
  },
  false,
);

The code for this article is available on GitHub

Inside the event handler function, we check if the current scrollTop position is greater than the last scrollTop position.

If the condition is met, then the user scrolled down.

If the current scrollTop position is less than the last scrollTop position, then the user scrolled up.

# Using a more simplified scroll event handler

Here is an example that uses a simpler scroll event handler.

The HTML is the same as in the previous subheading.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <h3>
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com
    </h3>
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript.

index.js

Copied!
window.addEventListener('scroll', function handleScroll(event) {
  if (window.scrollY > this.lastScrollTop || 0) {
    console.log('scrolling down');
  } else if (window.scrollY < this.lastScrollTop) {
    console.log('scrolling up');
  }

  this.lastScrollTop = window.scrollY;
});

detect scroll direction with simple scroll event handler

The code for this article is available on GitHub

Make sure to use a named function and not an arrow function for the event handler because we used the this keyword.

The example sets the lastScrollTop property on the this object to the number of pixels that the document is currently scrolled vertically.

The next time the scroll event is triggered, the window.scrollY property has a new value.

If the current value of window.scrollY is greater than the previous value, then the user is scrolling down.

If the current value of window.scrollY is less than the previous value, then the user is scrolling up.

# Using the `wheel` event to detect the scroll direction in JavaScript

You can also use the wheel event to detect the scroll direction in JavaScript.

The HTML is the same as in the previous examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <h3>
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
      bobbyhadz.com
    </h3>
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
document.body.addEventListener(
  'wheel',
  function handleWheel(event) {
    if (scrollDirectionIsUp(event)) {
      console.log('scrolling UP');
    } else {
      console.log('scrolling DOWN');
    }
  },
);


function scrollDirectionIsUp(event) {
  if (event.wheelDelta) {
    return event.wheelDelta > 0;
  }
  return event.deltaY < 0;
}

detect scroll direction using wheel event

The code for this article is available on GitHub

The wheel event is triggered when the user rotates a wheel button on a pointing device (a mouse).

However, using the scroll event should be your preferred approach because the wheel event and the scroll event are distinct.

The delta* values in a wheel event don't necessarily reflect the content's scrolling direction.

Therefore you shouldn't rely on the wheel event's delta* properties to get the scrolling direction.

Instead, you should use the scroll event from the previous two subheadings.

I've also written an article on how to handle the onScroll event in React.js.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to detect the Scroll direction using JavaScript

# Table of Contents