やりたいこと

画面が少しでもスクロールされていたらコンポーネントにクラスを付与してスタイルを変えたいという場合があったので実装方法を記事にします。React のhooksを使用して実装していますが、クライアントで JavaScript が動いていればなんでも大丈夫です。

実装

以下は React のhooksを使用した実装方法の例です。

import { debounce } from 'debounce';
import { useEffect, useState } from 'react';

/**
 * Hooks that returns whether body element is scrolled
 * @return {boolean} whether body element is scrolled
 */
export const useIsBodyScrolled = (): boolean => {
  const [isScrolled, setIsScrolled] = useState < boolean > false;
  useEffect(() => {
    const checkIsScrolled = debounce(() => {
      const elemOffset = window.pageYOffset;

      setIsScrolled(elemOffset > 0);
    }, 100);

    document.addEventListener('scroll', checkIsScrolled);

    return () => {
      document.removeEventListener('scroll', checkIsScrolled);
    };
  }, []);
  return isScrolled;
};

window.pageYOffset(参照)というブラウザ API を使用してスクロールされたかどうかのフラグを立てる関数を用意して、

document.addEventListener('scroll', checkIsScrolled);

スクロールのイベントに登録することでスクロールされるたびにスクロールされているかを判定する関数が呼び出されています。

ただ、このイベントは発火数が多いのでとても多いのでdebounceというライブラリを使用して 0.1 秒感覚でしかイベントが発火しないようにしています。

const isBodyScrolled = useIsBodyScrolled();

if (isBodyScrolled) {
  // スクロールされてる時
}

このように使えます。

最後に

今回は React で実装しましたが、ブラウザの API を利用した実装なので参考にして貰えばある程度は応用が効くと思います

では

Bye