1

so I've been trying to simply get my event listener for a component to work and update on scroll. I've found this post: Get scroll position with Reactjs and I've tried the second answer (because I'm working mostly with hooks and I want my code to be consistent.) So I have this code within my component:

const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = () => {
    const position = window.scrollY;
    console.log(position);
    setScrollPosition(position);
};

useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
        window.removeEventListener('scroll', handleScroll);
    };
}, [scrollPosition]);

The code logs nothing to the console and whenever I try to use scroll position the value is always 0. Am I doing something wrong? Any help would be greatly appreciated!

Jack Frumkes
  • 31
  • 1
  • 4
  • `scrollPosition` isn't referenced in the `effect` callback so it's not a dependency and should be removed. Once removed the code appears to function as you'd expect. Here's a running [codesandbox](https://codesandbox.io/s/logging-scroll-position-on-scroll-using-react-hooks-154pn?file=/src/App.js). Make sure your "window" has enough content to actually become scrollable. – Drew Reese Nov 30 '21 at 21:35
  • Ok then it's probably an error with somewhere else in my code. Thank you for providing that to confirm that it does work in the most basic setting. That's extremely helpful. I'll update this once I can find what's causing the problem more specifically – Jack Frumkes Nov 30 '21 at 22:36

2 Answers2

2

So I finally understand why the code wasn't working. The page I was wanting to scroll was wrapped within a div. The div took up the whole page and has multiple sections. I thought that the div was simply expanding the page and that the window was still being scrolled. It turns out that I was actually scrolling within the div and not the window. So the following is what ended up working:

const scrollEvent = (e) => { 
    console.log(e.target.scrollTop)
  }
...
<div onScroll={scrollEvent}>
   ...
</div>

I'm not sure if this is the most optimal or anything but at least it gives me the scroll position I wanted. Thank you everyone who answered!

Jack Frumkes
  • 31
  • 1
  • 4
0

You are giving the dependency to the useEffect. The useEffect will only be executed once the scrollPosition is changed.

And it will never change in your code, since the useEffect is not executed. It is mutually dependent.

Try removing the scrollPosition in the useEffect dependency.

Keshav Bohra
  • 34
  • 2
  • Thank you for your answer! I've removed the dependency. So I just have an empty array within the useEffect and I'm still getting no logs and no change in the variable. I've also tried not having any array and it still doesn't change. – Jack Frumkes Nov 30 '21 at 19:03
  • Actually, the code is working and the dependency in the `useEffect` is needed to log the scroll position every time it changes. When having an empty array, the hook is just executed once. – s1gr1d Mar 08 '22 at 15:30