この記事では、Reactで指定されたHTML要素が表示領域内にスクロールされたかどうかを監視するカスタムフック useScrollTrigger の作成方法を紹介します。このカスタムフックを使用することで、要素が表示領域に入った際にアニメーションや特定の処理を実行することが容易になります。

1. useScrollTrigger の解説

カスタムフック useScrollTrigger のコードを見ていきましょう。

const useScrollTrigger = (
  ref: RefObject<HTMLElement>,
  startPosition: number = 0
) => {
  const [isTriggered, setIsTriggered] = useState(false)

  useEffect(() => {
    const handleScrollTrigger = () => {
      if (ref.current) {
        const { top, bottom } = ref.current.getBoundingClientRect()
        const windowHeight = window.innerHeight

        if (top + startPosition < windowHeight && bottom > 0)
          setIsTriggered(true)
      }
    }

    window.addEventListener('scroll', handleScrollTrigger)
    window.addEventListener('resize', handleScrollTrigger)

    handleScrollTrigger()

    return () => {
      window.removeEventListener('scroll', handleScrollTrigger)
      window.removeEventListener('resize', handleScrollTrigger)
    }
  }, [ref])

  return isTriggered
}

export default useScrollTrigger

useScrollTrigger は2つの引数を受け取ります。

• ref: 監視対象のHTML要素への参照
• startPosition: トリガーが発生する位置のオフセット（デフォルトは 0）

useState を使って、isTriggered というステートを定義します。これは、要素が表示領域内にスクロールされたかどうかを表す真偽値です。
useEffect を使って、スクロールとリサイズのイベントリスナーを設定します。これらのリスナーは、ウィンドウがスクロールされたりリサイズされたりしたときに handleScrollTrigger 関数を呼び出し、isTriggered の値を更新します。
handleScrollTrigger 関数では、監視対象の要素の矩形がウィンドウの表示領域内に入ったかどうかをチェックし、isTriggered の値を更新します。オフセットが指定されている場合、表示領域内でトリガーが発生する位置が調整されます。

2. 使用方法

useScrollTrigger を使って、コンポーネント内で要素が表示領域内にスクロールされたかどうかを監視する方法を紹介します。

import React, { useRef } from 'react'
import useScrollTrigger from '@/hooks/useScrollTrigger'

const MyComponent = () => {
  const ref = useRef<HTMLElement>(null)
  const isTriggered = useScrollTrigger(ref)

  return (
    <div>
      <div ref={ref} className={isTriggered ? 'visible' : 'hidden'}>
        スクロールで表示される要素
      </div>
    </div>
  )
}

export default MyComponent

上記のコードでは、useRef を使って、監視対象の要素への参照を作成しています。そして、useScrollTrigger を使って、要素が表示領域内にスクロールされたかどうかを判定しています。
isTriggered の値に応じて、要素のクラス名が切り替わります。この例では、表示領域内にスクロールされたときに visible クラスが適用され、それ以外の場合は hidden クラスが適用されます。これにより、CSSで要素の表示・非表示やアニメーションを制御することができます。
以下は、表示・非表示の切り替えに使用できる簡単なCSS例です。

.hidden {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visible {
  opacity: 1;
  transition: opacity 0.3s ease;
}

このように、useScrollTrigger カスタムフックを使うことで、コンポーネント内で要素が表示領域内にスクロールされたかどうかを監視し、表示領域内に入った際にアニメーションや特定の処理を実行することが容易になります。

まとめ

この記事では、Reactで指定されたHTML要素が表示領域内にスクロールされたかどうかを監視するカスタムフック useScrollTrigger の作成方法を紹介しました。
useScrollTrigger を使用することで、要素が表示領域に入った際にアニメーションや特定の処理を実行することが容易になります。ぜひ、このカスタムフックをプロジェクトで活用して、スクロールに応じた動的なウェブアプリケーションを作成してください。