画面に入ったら〜

監視対象となる要素全てをdocument.querySelectorAllで取得し、変数に格納します。

画面に入った時に処理したい内容を関数で定義します。
引数には画面に入った要素が渡ってくるようにします。
本デモでは画面に入った要素のテキストをアラートで出すようにしています。

監視の設定を行なっていきます。
new IntersectionObserverの戻り値を使うことで監視ができます。
この戻り値を変数に格納します。

IntersectionObserverの第１引数には、監視対象要素が画面に入った・出たときの処理を書いていきます。
entries[0]には監視情報が入っています。
画面に入った時を判断するには、entries[0].isIntersectingがtrueかどうか？を確認します。
entries[0].targetには監視対象要素が入っているため、これを関数callbackに渡します。
一度画面に入ったら監視は不要のため、observer.unobserve(entries[0].target)で監視を解除しておきます。

IntersectionObserverの第２引数には監視の設定を書いていきます。
rootMarginを指定すれば画面内に入ったと判断する境界位置をずらすことができます。
thresholdは対象要素が何割画面に入ったら、という割合を指定することができます。
本デモでは対象要素の全体が画面内に入ったら、という設定にしています。

targetsを反復処理して監視を開始します。