221

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")
}
2
  • It's the wheelDelta of the event. Quite not cross-browser. See phrogz.net/js/wheeldelta.html
    – marekful
    Jul 4, 2015 at 17:29
  • 1
    hmmm not quite what I was looking for but I appreciate your help :P Any other suggestions?
    – dwinnbrown
    Jul 4, 2015 at 17:30

18 Answers 18

320

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);
14
  • 52
    It would be safer to initialize lastScrollTop to pageYOffset || scrollTop rather than assuming 0
    – Ed Ballot
    Jul 4, 2015 at 18:17
  • 1
    @Prateek Thanks for your answer but it isn't working for me... I am trying to 'change scene' in my webapp which is built using Tumult Hype.
    – dwinnbrown
    Jul 4, 2015 at 18:49
  • 1
    what is negative scrolling? per this answer, browsers do not allow negative scrolling, so what is that for?
    – mockingjay
    Jun 9, 2021 at 8:59
  • 1
    what if the current position is on top of the list, the previous scrollTop and the current one are equal to 0
    – Hoangdz
    Jul 18, 2022 at 0:49
  • 1
    @mockingjay Touch devices allow slight scrolling beyond bounds. This gives the user visual cues that they have reached the limit of scrolling. When you query the DOM attributes during such animation, you may find values that are out of bounds. The test for <= 0 handles that situation. A similar situation may arise at the other end.
    – Jake
    Jan 26 at 3:32
91

Simple way to catch all scroll events (touch and wheel)

window.onscroll = function(e) {
  // print "false" if direction is down and "true" if up
  console.log(this.oldScroll > this.scrollY);
  this.oldScroll = this.scrollY;
}
1
  • 23
    Welcome to SO, if you add a desctription to your answer, this can be more helpfull to the OP and to others. Aug 16, 2017 at 17:37
62

Use this to find the scroll direction. This is only to find the direction of the Vertical Scroll. Supports all cross browsers.

var scrollableElement = document.body; //document.getElementById('scrollableElement');

scrollableElement.addEventListener('wheel', checkScrollDirection);

function checkScrollDirection(event) {
  if (checkScrollDirectionIsUp(event)) {
    console.log('UP');
  } else {
    console.log('Down');
  }
}

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

Example

4
  • 3
    This is good, but only seems to work for using the scroll wheel Oct 2, 2018 at 20:03
  • 14
    From MDN webdocs: Note: Don't confuse the wheel event with the scroll event. The default action of a wheel event is implementation-specific, and doesn't necessarily dispatch a scroll event. Even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction. Therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. Instead, detect value changes of scrollLeft and scrollTop of the target in the scroll event. developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event May 12, 2020 at 15:31
  • 1
    This one is good (compared to scroll event) because it fires also after reaching the end or start of scroll location - sometimes you may want to fire some specific action "to scroll over" the end of the element.
    – lenooh
    Sep 9, 2020 at 15:07
  • 2
    Thanks! Very useful in "fixed" positioned sections!
    – Oleksa O.
    Dec 3, 2020 at 9:45
20

You can try doing this.

function scrollDetect(){
  var lastScroll = 0;

  window.onscroll = function() {
      let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value

      if (currentScroll > 0 && lastScroll <= currentScroll){
        lastScroll = currentScroll;
        document.getElementById("scrollLoc").innerHTML = "Scrolling DOWN";
      }else{
        lastScroll = currentScroll;
        document.getElementById("scrollLoc").innerHTML = "Scrolling UP";
      }
  };
}


scrollDetect();
html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}

.cont{
  height:100%;
  width:100%;
}

.item{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  background: #ffad33;
}

.red{
  background: red;
}

p{
  position:fixed;
  font-size:25px;
  top:5%;
  left:5%;
}
<div class="cont">
  <div class="item"></div>
  <div class="item red"></div>
  <p id="scrollLoc">0</p>
</div>

1
  • this is not working fine for me. When I scroll up even upto some certain height it shows down
    – Developer
    Aug 14, 2018 at 20:22
13
  1. Initialize an oldValue
  2. Get the newValue by listening to the event
  3. Subtract the two
  4. Conclude from the result
  5. Update oldValue with the newValue

// Initialization

let oldValue = 0;

//Listening on the event

window.addEventListener('scroll', function(e){

    // Get the new Value
    newValue = window.pageYOffset;

    //Subtract the two and conclude
    if(oldValue - newValue < 0){
        console.log("Up");
    } else if(oldValue - newValue > 0){
        console.log("Down");
    }

    // Update the old value
    oldValue = newValue;
});
10

While the accepted answer works, it is worth noting that this will fire at a high rate. This can cause performance issues for computationally expensive operations.

The recommendation from MDN is to throttle the events. Below is a modification of their sample, enhanced to detect scroll direction.

Modified from: https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

// ## function declaration
function scrollEventThrottle(fn) {
  let last_known_scroll_position = 0;
  let ticking = false;
  window.addEventListener("scroll", function () {
    let previous_known_scroll_position = last_known_scroll_position;
    last_known_scroll_position = window.scrollY;
    if (!ticking) {
      window.requestAnimationFrame(function () {
        fn(last_known_scroll_position, previous_known_scroll_position);
        ticking = false;
      });
      ticking = true;
    }
  });
}

// ## function invocation
scrollEventThrottle((scrollPos, previousScrollPos) => {
    if (previousScrollPos > scrollPos) {
      console.log("going up");
    } else {
      console.log("going down");
    }
});

9

This is an addition to what prateek has answered.There seems to be a glitch in the code in IE so i decided to modify it a bit nothing fancy(just another condition)

$('document').ready(function() {
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       console.log("down")
   }
   else if(st == lastScrollTop)
   {
     //do nothing 
     //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
   }
   else {
      console.log("up")
   }
   lastScrollTop = st;
});});
1
  • 1
    Thanks for your hint ... this seems to be connected to IE "Smooth Scrolling" option
    – Kristo
    Mar 7, 2018 at 23:10
5

This simple code would work: Check the console for results.

let scroll_position = 0;
let scroll_direction;

window.addEventListener('scroll', function(e){
    scroll_direction = (document.body.getBoundingClientRect()).top > scroll_position ? 'up' : 'down';
    scroll_position = (document.body.getBoundingClientRect()).top;
    console.log(scroll_direction);
});
1
  • Calling getBoundingClientRect forces a layout of the element (in this case, the entire body) every time it is called. It is best therefore to call it once per scroll event and cache the result... Oct 5, 2021 at 15:34
3

You can get the scrollbar position using document.documentElement.scrollTop. And then it is simply matter of comparing it to the previous position.

1
  • Ok and could I still use this on a website which won't traditionally allow scrolling (i.e. it fits the browser 100% width and height. Thanks
    – dwinnbrown
    Jul 4, 2015 at 17:35
3

If anyone looking to achieve it with React hooks

  const [scrollStatus, setScrollStatus] = useState({
    scrollDirection: null,
    scrollPos: 0,
  });

  useEffect(() => {
    window.addEventListener("scroll", handleScrollDocument);

    return () => window.removeEventListener("scroll", handleScrollDocument);
  }, []);

  function handleScrollDocument() {
    setScrollStatus((prev) => { // to get 'previous' value of state
      return {
        scrollDirection:
          document.body.getBoundingClientRect().top > prev.scrollPos
            ? "up"
            : "down",
        scrollPos: document.body.getBoundingClientRect().top,
      };
    });
  }

  console.log(scrollStatus.scrollDirection)
2

I personally use this code to detect scroll direction in javascript... Just you have to define a variable to store lastscrollvalue and then use this if&else

let lastscrollvalue;

function headeronscroll() {

    // document on which scroll event will occur
    var a = document.querySelector('.refcontainer'); 

    if (lastscrollvalue == undefined) {

        lastscrollvalue = a.scrollTop;

        // sets lastscrollvalue
    } else if (a.scrollTop > lastscrollvalue) {

        // downscroll rules will be here
        lastscrollvalue = a.scrollTop;

    } else if (a.scrollTop < lastscrollvalue) {

        // upscroll rules will be here
        lastscrollvalue = a.scrollTop;

    }
}
1
  • This is awesome, it work with any element not only window Oct 4, 2021 at 8:25
2

Modifying Prateek's answer, if there is no change in lastScrollTop, then it would be a horizontal scroll (with overflow in the x direction, can be used by using horizontal scrollbars with a mouse or using scrollwheel + shift.

const containerElm = document.getElementById("container");

let lastScrollTop = containerElm.scrollTop;

containerElm.addEventListener("scroll", (evt) => {
  const st = containerElm.scrollTop;

  if (st > lastScrollTop) {
    console.log("down scroll");
  } else if (st < lastScrollTop) {
    console.log("up scroll");
  } else {
    console.log("horizontal scroll");
  }

  lastScrollTop = Math.max(st, 0); // For mobile or negative scrolling
});
2

Sometimes there are inconsistencies in scrolling behavior which does not properly update the scrollTop attribute of an element. It would be safer to put some threshold value before deciding the scroll direction.

let lastScroll = 0
let threshold = 10 // must scroll by 10 units to know the direction of scrolling


element.addEventListener("scroll", () => {
    let newScroll = element.scrollTop
    
    if (newScroll - lastScroll > threshold) {
        // "up" code here
    } else if (newScroll - lastScroll < -threshold) {
        // "down" code here
    }
    
    lastScroll = newScroll

})
1

This seems to be working fine.

document.addEventListener('DOMContentLoaded', () => {

    var scrollDirectionDown;
    scrollDirectionDown = true;

    window.addEventListener('scroll', () => {

        if (this.oldScroll > this.scrollY) {
            scrollDirectionDown = false;
        } else {
            scrollDirectionDown = true;
        }
        this.oldScroll = this.scrollY;


        // test
        if (scrollDirectionDown) {
            console.log('scrolling down');
        } else {
            console.log('scrolling up');
        }



    });
});
1
let arrayScroll = [];
        window.addEventListener('scroll', ()=>{
            arrayScroll.splice(1); //deleting unnecessary data so that array does not get too big
            arrayScroll.unshift(Math.round(window.scrollY));
            if(arrayScroll[0] > arrayScroll[1]){
                console.log('scrolling down');
            } else{
                console.log('scrolling up');
            }
        })

I have self-made the above solution. I am not sure if this solution may cause any considerable performance issue comparing other solutions as I have just started learning JS and not yet have completed my begginer course. Any suggestion or advice from experienced coder is highly appriciated. ThankYou!

1

Down = -1, up = 1

window.addEventListener("wheel", e => {
    const scrollDirection = e.deltaY < 0 ? 1 : -1;
    console.log(scrollDirection)
}
0

There is an easiest way to determine if goes to top, goes down, left or right, just check if wheelDelta > 0 or wheelDelta < 0

enter image description here

0

You can simply get the up and down scroll direction by using the scrollTop value

let lastScroll = 0
document.getElementById('div').addEventListener('scroll', (e)=> {
    const scrollTop = e.scrollTop
    if (lastScroll > scrollTop) {
      console.log('up')
    } else {
      console.log('down')
    }
    lastScroll = scrollTop
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.