Doesn't work event listener scroll in React

Question

I reproduce this bug here. document.body.addEventListener("scroll",func) doesn't work. I think maybe it's related to last version of React because before when I had lower version it's worked. https://codesandbox.io/s/upbeat-zeh-rzpoxi?file=/src/App.js

Answer 1

import "./styles.css";
import React from "react";

export default function App() {
  const [number, setNumbers] = React.useState(
    new Array(100).fill(Math.floor(Math.random(1) * 10000))
  );

  const scrollFunc = (e) => {
    let a = e.target.scrollTop;
    console.log(a);
  };

  React.useEffect(() => {
    document.addEventListener("scroll", scrollFunc);
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {number.map((item, i) => {
        return <div key={i}>{item}</div>;
      })}
    </div>
  );
}

it should be document.addEventListner()