UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Next.js】window scroll event を使いたい

スクルロール量に応じてフローティングヘッダーの表示制御を行いたい

github.com

上のissueの中で次の実装例がある

const handleScroll = () => {};
useEffect(() => {
  if (typeof window !== "undefined") {
    window.addEventListener("scroll", handleScroll);
  }
  return () => window.removeEventListener("scroll", handleScroll);
}, []);

上のissueの中で第二引数にhandleScrollをセットする実装もあったが、これをやるとヘッダーが表示/非表示するたびにレンダリングされてしまったのでやらない