javascriptscrollonscroll

Detecting scroll direction


So I am trying to use the JavaScript on scroll to call a function. But I wanted to know if I could detect the direction of the the scroll without using jQuery. If not then are there any workarounds?

I was thinking of just putting a 'to top' button but would like to avoid that if I could.

I have now just tried using this code but it didn't work:

if document.body.scrollTop <= 0 {
    alert ("scrolling down")
} else {
    alert ("scrolling up")
}

Solution

  • It can be detected by storing the previous scrollTop value and comparing the current scrollTop value with it.

    JavaScript :

    var lastScrollTop = 0;
    
    // element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
    element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
       var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
       if (st > lastScrollTop) {
          // downscroll code
       } else if (st < lastScrollTop) {
          // upscroll code
       } // else was horizontal scroll
       lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
    }, false);