React（Next.js）でスクロール量を測る

Next.jsでスクロール量に対して、cssを切り替えたかったので、実装方法をご紹介します。

  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    window.scrollY > 200 ? setIsVisible(true) : setIsVisible(false);
  };

  useEffect(() => {
    window.addEventListener("scroll", toggleVisibility);
    return () => window.removeEventListener("scroll", toggleVisibility);
  }, []);

toggleVisibilityで関数を用意し、addEventListenerでスクロールイベントで発火させます。