Window scroll event not fired

[mrgoonie]

Bug report

Describe the bug

Window scroll event are not fired.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  const handleScroll = (e) => { console.log(e) }
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

Expected behavior

Print out the event info in debug panel.

System information

• OS: macOS
• Browser (if applies): Chrome Version 86.0.4240.111
• Version of Next.js: 9.5.3
• Version of Node.js: 14.13.1

Additional context

Add any other context about the problem here.

[mrgoonie]

Work around:

Add the scroll event listener into the body instead of the window or document

...
  const handleScroll = (e) => { console.log(e) };
  useEffect(() => {
    document.body.addEventListener('scroll', handleScroll);
    return () => document.body.removeEventListener('scroll', handleScroll);
  }, []);
...

[rimzzlabs]

any solution?, because there's nothing appear in my console

function handleScroll() {
    console.log('scrolled!')
  }

  useEffect(() => {
    document.body.addEventListener('scroll', handleScroll)
    return () => document.body.removeEventListener('scroll', handleScroll)
  }, [])

[risingstar9]

Me too! I am using next.js 10.2.3 now.

[daltonmenezes]

Same on v10.0.8, nothing seems to fire the scroll event. If I add a setInterval and check the window.scrollY, the value is always locked as zero :(

[daltonmenezes]

Ok, my issue was on the container where it was using vh instead of percentage. (I don't think this is an expected behavior), but if I add any height in another sections of the same page, there's a lot of wierd behaviors. Looks like Next is handling some scroll event by it self and causing it. 🤔

[daltonmenezes]

This is how I fix it:
css

.main {
  height: 100vh;
}

tsx

useEffect(() => {
  const container = document.querySelector('main')

  const handleScroll = ({ target }) => {
    setScrollTopValue(target.scrollTop)
  }

  container.addEventListener('scroll', handleScroll, false)
  return () => container.removeEventListener('scroll', handleScroll)
}, [])

[surajdhungana46]

This is how I fix it: css

.main {
  height: 100vh;
}

tsx

useEffect(() => {
  const container = document.querySelector('main')

  const handleScroll = ({ target }) => {
    setScrollTopValue(target.scrollTop)
  }

  container.addEventListener('scroll', handleScroll, false)
  return () => container.removeEventListener('scroll', handleScroll)
}, [])
``` complete code ??