はじめに

Reactアプリケーションでスクロールイベントを実装する際、「イベントリスナーを登録したはずなのに発火しない」という問題に遭遇することがあります。
今回は、スクロールイベントが発火しない時に見直すべき点を紹介します。

scrollイベントの追加方法

まず、Reactにおけるスクロールイベントの設定方法から。useStateとuseEffectを使った基本的な実装は以下の通りです。
よくあるやつですね。

import React, { useEffect, useState } from "react";

const ScrollComponent: React.FC = () => {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
      console.log('スクロール位置:', window.scrollY);
    };

    window.addEventListener("scroll", handleScroll);
    handleScroll();

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div>
      <p>現在のスクロール位置: {scrollY}px</p>
    </div>
  );
};

scrollイベントが発火しない原因

上記のような実装を行った時、「あれ？スクロールイベントが発火してくれない・・・」となった時、見落としがちなのが以下です。

CSSでheightを固定してしまっている

以下のような指定をしてしまっていないかを確認しましょう。
要は、スクロールイベントを発火させたいコンポーネントに対して、どのような設定がされているか？を確認してみてください、ということです。

html, body {
  height: 100vh; /* 固定の高さでスクロールできない */
  overflow: hidden; /* スクロールを無効化 */
}

/* またはスクロールバーを無効化しているとか */
body {
  overflow-y: hidden;
}

最後に

基本的な部分ではあるのですが、ついつい見落としがちなポイントです。
最初からページの高さやスクロール可能性を考慮したレイアウト設計をしていれば、多くの問題は回避できるでしょうが、既存プロジェクトへの機能追加時や、レスポンシブ対応時（デスクトップでは問題なくてもモバイル端末で突然スクロールできなくなる、など）、動的コンテンツの影響（APIから取得したデータの量によってページの高さが変動するような場合）などのケースにおいて、遭遇しやすいかと思いますので、参考にしてみてください。

それでは、また。

HTNCode