Next.js: how can i handle window scroll event

[Mracobes9]

Hi. I worked on project with nextjs and i need to set scroll event handler for window. How can i do it ?

[sergiodxa]

As in any React app, in componentDidMount you need to add the event listener to window and in componentWillUnmount you need to remove it.

[Mracobes9]

Can you get example app ?

[heavenlian]

@sergiodxa no working

[srsandy]

@Mracobes9

componentDidMount() {
        window.addEventListener('scroll', this.onScroll, false);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.onScroll, false);
    }

with Hooks

const handleScroll = () => {}
useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  });

[pedroview]

const handleScroll = () => {}
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
});

This is working in my react project but does nothing in next js

[mrgoonie]

Have you figured it out @pedroview ?

[pedroview]

Have you figured it out @pedroview ?

I gave the solution that worked for me above

[mrgoonie]

Hmm.. it's not working for me. I have to add the scroll event listener into the body instead for the work around.

[moak]

Hmm.. it's not working for me. I have to add the scroll event listener into the body instead for the work around.

Same for me .. and document.documentElement.scrollTop is 0 :(

[mrgoonie]

Hmm.. it's not working for me. I have to add the scroll event listener into the body instead for the work around.

Same for me .. and document.documentElement.scrollTop is 0 :(

I'm not sure if it's a bug or something, but it happened because I had the overflow-x: hidden in the body's style, after removing it, the window's scrolling event was back to work properly, that's kind of weird 😅