【React】 画面のスクロールイベントでCSSを切り替える

Web制作に関することをブログにしました。誰かのお役に立てれば幸いです。
画面がスクロールされたことを検知して、トップに戻るボタンが現れたり、
トップバーの背景色が変わったりなど、スクロールイベントに合わせてCSSを切り替える方法を紹介します。

useEffectについて

今回の実装では、useStateとuseEffectを使います。
以前のブログでuseStateについては、まとめてあるので、
今回は、useEffectについて、まとめておきたいと思います。

useEffect(() => {
    // 第一引数 ①実行したい関数
    return () => {
        // クリーンナップ処理を記述する。
    };
},[]); // 第二引数 ②関数の実行を制御する変数

useEffectはサイトがレンダリングされたタイミングで第一引数の処理を実行するHookです。
処理が実行されるタイミングは、第二引数によってコントロールすることができます。

・第二引数を記述しない ⇨ レンダリングするたびに処理を実行

・第二引数を[] ⇨ 初回レンダリング時のみ処理を実行

・第二引数を[state] ⇨ stateの更新が起こるたびに処理を実行

となります。 クリーンナップ処理は、必要な場合のみ記述するもので省略可能です。

スクロールされたことを検知する

画面を下にスクロールしたときに、CSSが切り替わる様にします。

import { useEffect, useState } from 'react'
import s from "./Test.module.css";

const [isVisible, setIsVisible] = useState(false)

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

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

<div
  className={isVisible ? s.test_visible : s.test}
>
〜〜〜

上の処理で、スクロールされたことを検知しているのは、
window.addEventListener('scroll', toggleVisibility)の部分です。
addEventListenerには、クリーンナップ処理が必要なので、その処理が書かれています。
スクロールされたことを検知し、toggleVisibilityの関数を実行、
条件に合えば、isVisibleが、trueに更新されます。
あとは、isVisibleによってクラス名を切り替えてやれば、CSSが変わることになります。

<参考にしたサイト>

https://zenn.dev/web_tips/articles/795b2a85fd2d97

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener