How to detect scroll up or scroll down?

Question

Currently I need to listen for a onWheel event in react. The event gets triggered. But, I am not able to find a way to detect if user is scrolling up or scrolling down. How shall I detect that event?

const handleOnWheel = (event: React.WheelEvent) => {
    if (event.deltaY < 0) {
      console.log('Scrolling up');
    } else {
      console.log('Scrolling down');
    }
  };

This is what I was able to find online. It works well for scroll down. But, for scrolling up, both scroll down and scroll up gets printed to console.

user_17663717 · Answer

This shouldn't be possible, since you either log one message OR the other, which means that event.deltaY is rapidly jumping between being < 0 and not being < 0. I have tested the exact same code on my computer locally and it was working just fine. There might be a problem with your scroll, maybe it is sending false data due to it being damaged or worn off?

user_2503592 · Answer

Can you please try running the code below.

window.onscroll = function(e) {
  console.clear();

  if(this.oldScroll > this.scrollY){
    console.log('Scrolling up');
  }
  else{
    console.log('Scrolling down');
  }
  
  this.oldScroll = this.scrollY;
}

How to detect scroll up or scroll down?

2 Answers