How to know the direction a user is scrolling to in React.js?

Question

I have a div that has an onScroll handler and I need to know the direction where the user will scroll(to top or bottom).

My html:

<body>
 <div>
  Section1
 </div>
 <div>
  Section1
 </div>
</body>

My js:

document.addEventListener('scroll', (event) => {
        if(....){
          console.log(user scroll to top); 
        }else {
          console.log(user scroll to bottom);
        }
    });

What I should write instead ...

Hello, VanyaIvan; please add your minimum viable code and extra details here about what you are trying to acheive: thanks! — Aaron Morefield, Mar 19 '21 at 19:10
you should show us some code but this might solve your problem https://codepen.io/JohnReynolds57/pen/NLNOyO?editors=0011 — midugh, Mar 19 '21 at 19:14
Does this answer your question? [Detect scroll direction in React js](https://stackoverflow.com/questions/62497110/detect-scroll-direction-in-react-js) — Zsolt Meszaros, Mar 19 '21 at 19:24
@ZsoltMeszaros I'm sorry but no, because I need to know where user scroll — VanyaIvan, Mar 19 '21 at 19:27
What do you mean by "where"? In what direction? Because that's exactly what the linked question is about. — Zsolt Meszaros, Mar 19 '21 at 19:32

score 1 · Answer 1 · answered Mar 19 '21 at 19:36

You can use window.scrollY to determinate in which position scroll is. Of course when value of this is 0 is mean that is the on the top. It can be a little bit tricky how to get max window scroll height, but below is the way.

     if (window.scrollY === 0) {
        console.log("user scroll to top");
      } else if (window.scrollY + 1 >= document.documentElement.offsetHeight - window.innerHeight ) {
        console.log("user scroll to bottom");
      }

score 0 · Answer 2 · answered Mar 19 '21 at 19:40

Elements have this property: scrollTop which is the distance in pixels to the top,

let previousTop = 0;

document.onscroll = (event) => {
  if(previousTop < event.target.scrollTop){
    console.log(user scroll to bottom); 
  }else {
    console.log(user scroll to top);
  }
  previousTop = event.target.scrollTop;
});

How to know the direction a user is scrolling to in React.js?

2 Answers2