使用 NextJS 获取滚动位置

Question

我想知道用户是否滚动或不更新 NextJS 中的 UI。我有以下代码，我找到的所有示例都有相同的代码：

  const [scrollY, setScrollY] = useState(0);

  const onScroll = (event) => {
    const { pageYOffset, scrollY } = window;
    console.log("yOffset", pageYOffset, "scrollY", scrollY);
    setScrollY(window.pageYOffset);
  };

  useEffect(() => {
    document.body.addEventListener("scroll", onScroll, { passive: true });
    // remove event on unmount to prevent a memory leak
    () => document.removeEventListener("scroll", onScroll, { passive: true });
  }, []);

但是滚动条没有更新，document 和 window 都没有更新。我总是得到相同的输出：

有什么建议吗？谢谢:)

Answer 1

onScroll 函数在每次重新渲染时销毁并在状态发生变化时再次创建，因此其对象 ID 也会发生变化。并且在 useEffect 上定义的不应更改。

您需要使用 useCallback 来防止此行为并将 onScroll 包装在其中。

并将 addEventListener 添加到 window，因为您正在阅读 pageYOffset，scrollY 来自 window onScroll 函数

  const onScroll = useCallback(event => {
      const { pageYOffset, scrollY } = window;
      console.log("yOffset", pageYOffset, "scrollY", scrollY);
      setScrollY(window.pageYOffset);
  }, []);

  useEffect(() => {
    //add eventlistener to window
    window.addEventListener("scroll", onScroll, { passive: true });
    // remove event on unmount to prevent a memory leak with the cleanup
    return {
       window.removeEventListener("scroll", onScroll, { passive: true });
    }
  }, []);

使用 NextJS 获取滚动位置

Get scroll position with NextJS

scroll

reactjs

next.js