reactでスクロールに応じてstateを更新したい

Question

前提・実現したいこと

Reactを使って以下のようにスクロールでstateが更新されるようなロジックを作りたいと思います。

イメージとしては見出しが画面から外れた時に現状の state + 1 で今の番号を定義か、
body内にある見出し要素の中で最も高い位置にある要素を取るかどちらかですが、ロジックが思い付かず質問いたしました。

難しいと感じているのは以下の2つです

• state更新のタイミング
• 要素の数が可変であること

具体的な相談内容

state更新のロジック

jQueryであれば、全ての見出しの同じクラスを振っておき、 body 内にあるもので最も上部にある要素のidで判別すればよいと思いますが、reactの場合 React.createRef() だと同じことができずに困っています。

要素が可変

要素の数は固定ではなく、4〜20の可変なので、stete更新ロジックとも被る問題ですが、各見出し要素の位置を個別に捉えるためのロジックが思い付かず困っています。

ロジックが思い付かず、書いたコードを提示できず申し訳ない質問ですが、もしヒントや何か参考になりそうなリンクがあれば、教えていただけると大変ありがたいです。

どうぞよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

• react: 16.8
• 当質問はクラスコンポーネントへの実装を考えております。

Answer 1

react-event-lisner というパッケージがあります。
この EventListener コンポーネントを使うことで、スクロール時に実行する関数を指定できます。
あとは要素の window からの相対位置を条件として state の更新をすればいいと思います。
要素が可変なので、その通りではないはずですが、簡単な例は以下の通りです。

const Smaple: React.FC = () => {

  const handleScroll = React.useCallback(() => {
    const targetElement = document.getElementById('hoge')
    const y = targetElement?.getBoundingClientRect().top
    if (y && y > 0) {
      // setState的な
    } else {
      // setState的な
    }
  }, [])

  return (
    <>
      <EventListener
        target="window"
        onScroll={handleScroll}
      />
      {
        // 何か id が hoge な要素を持つjsx
      }
    </>
  )
}

要素が可変な問題はすでに関数まで落ちているので、map 関数で回す等で解決できるかと思います。
もしわからない部分があれば気軽にコメントください。

Comments

[uchida_yuma]

すばらしいご回答をありがとうございました！

ご提示のパッケージで以下の関数を呼び出すことで、無事一番トップに近い要素の値をsetState()することができました。

大変助かりまして、感謝申し上げます。

似た問題に当たった方のために書きますと、
document.getElementsByClassName
で要素をまとめて取得しましたが、正式な配列ではないので、mapやforEachが使えなかったので、forループで行いました。
```

handleScroll = (e) => {
const targetElements = document.getElementsByClassName('trip-event')

let positions = []
// 比較用の配列を作成
for (let i = 0; i < targetElements.length; i++) {
if (Math.sign(targetElements[i].getBoundingClientRect().top) === 1) {
positions.push({ "key": i, "offset": targetElements[i].getBoundingClientRect().top })
}
}
this.props.tripStepSuccess(positions.shift().key)
}
```