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

image

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

useEffectについて

今回の実装では、useStateuseEffectを使います。
以前のブログ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


お知らせ

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

お知らせ

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More