Javascript JS滚动事件未触发内部react S使用效果

发布于11月06日

我想在我的网站上添加无限滚动功能，但当我滚动页面时，Scroll EventListener没有触发的问题.

useEffect(() => {
    window.addEventListener("scroll", handleInfiniteScrolling);
    console.log("Hello");
    return () => {
      window.removeEventListener("scroll", handleInfiniteScrolling);
    };
  }, []);

const handleInfiniteScrolling = async () => {
    try {
      console.log("Scroll Height", document.documentElement.scrollHeight);
      console.log("Inner Height", window.innerHeight);
      console.log("scrollTop", document.documentElement.scrollTop);
    } catch (err) {
      console.log(err);
    }
  };

return (
    <>
      <div
        className="results-page"
        style={{
          height: "100vh",
          overflow: 'scroll',
        }}
      >
        {data.map((item) => (
          <MainLayer props={item} key={item._id} />
        ))}
      </div>
    </>
  );

推荐答案

div是滚动容器，div内的内容被滚动.您需要使用onScroll事件将事件侦听器添加到div:

const data = Array.from({ length: 100 }, () => ({ _id: crypto.randomUUID() }));

const Demo = () => {  
  const handleInfiniteScrolling = e => {
    console.log(e.target.scrollTop)      
  };

  return (
    <div
      onScroll={handleInfiniteScrolling}
      className="results-page"
      style={{
        height: "100vh",
        overflow: 'scroll',
      }}
    >
      {data.map(item => (
        <div key={item._id}>{item._id}</div>
      ))}
    </div>
  );
};

ReactDOM
  .createRoot(root)
  .render(<Demo />);

html, body {
  margin: 0;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>