滚动事件未在 useEffect 中触发

Question

我想在我的网站中添加无限滚动功能，但滚动事件监听器出现问题，当我滚动页面时它不会触发

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>
    </>
  );

Answer 1

div

是滚动容器，

div

里面的内容是滚动的。您需要使用

div

:

 将事件侦听器添加到 

ref

const { useEffect, useRef } = React;

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

const Demo = () => {
  const ref = useRef();
  
  useEffect(() => {
    const handleInfiniteScrolling = e => {
      console.log(e.target.scrollTop)      
    };
    ref.current.addEventListener("scroll", handleInfiniteScrolling);
    return () => {
      ref.current.removeEventListener("scroll", handleInfiniteScrolling);
    };
  }, []);

  return (
    <div
      ref={ref}
      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>