使用 NextJs 获取滚动条位置

Question

我使用 NextJs 来利用服务器端渲染。而且我的应用程序中有一个导航栏，它应该随滚动位置更改样式。如何在 NextJs 应用程序上检查窗口是否滚动超过 100 像素？

Answer 1

您可以简单地使用useEffect这样的钩子：

import { useEffect, useState } from "react";

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

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };

    // just trigger this so that the initial state 
    // is updated as soon as the component is mounted
    // related: /sf/answers/4438575151/
    handleScroll();

    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div style={{ height: 4000 }}> {/* just added to make scrollbar available */}
      <div style={{ position: "fixed", top: 0 }}>
        {scrollY > 100
          ? "Scrolled more than 100px"
          : "Still somewhere near the top!"}
      </div>
    </div>
  );
};

export default IndexPage;

沙盒：https://codesandbox.io/s/cocky-drake-1xe0g

可以通过消除滚动处理程序来进一步优化此代码。并且可选地，仅在状态未更改时设置状态（不确定较新版本的 React 是否会自行处理此问题）。

您的问题与此线程直接相关：/sf/answers/4158211291/

对于去抖/节流你可以参考这个：如何使用 React Hook 进行节流或去抖？

另外，如果您不想在该线程中使用提供的解决方案，只需将其包装起来handleScroll，_.debounce然后将其提供给事件处理程序。