title: Get scroll position with NextJS
body: <p>I want to know if the user has scrolled or not to update the UI in NextJS. I have the following code, all the examples I have found have the same code:</p>
  <pre class="lang-js prettyprint-override"><code>  const [scrollY, setScrollY] = useState(0);
  
    const onScroll = (event) =&gt; {
      const { pageYOffset, scrollY } = window;
      console.log(&quot;yOffset&quot;, pageYOffset, &quot;scrollY&quot;, scrollY);
      setScrollY(window.pageYOffset);
    };
  
    useEffect(() =&gt; {
      document.body.addEventListener(&quot;scroll&quot;, onScroll, { passive: true });
      // remove event on unmount to prevent a memory leak
      () =&gt; document.removeEventListener(&quot;scroll&quot;, onScroll, { passive: true });
    }, []);
  </code></pre>
  <p>But the scroll does not get updated, neither with <code>document</code> nor <code>window</code>. I always get the same output:</p>
  <p><a href="https://i.stack.imgur.com/yzwTB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yzwTB.png" alt="enter image description here" /></a></p>
  <p>Any suggestion?
  Thanks:)</p>