<aside> ⚠️ 古いブラウザでは未対応なので、互換性を持たせるためにpolyfill（ポリフィル）を読み込ませる必要あり https://yumegori.com/scroll-animation-intersection-observer#chapter-6

</aside>

↓参考資料

jsでのスクロール連動エフェクトには【Intersection Observer】を！！

↓スクロール監視クラスを作成しました。

scroll.js.zip

scroll.jsの中身紹介

• IntersectionObserver：「Intersection」物体の交差　「Observer」監視するもの　つまり”交差を監視するもの”という意味

▼基本的な使い方

1. new IntersectionObserver(cb); とインスタンスを生成。また定数に格納しておく。※( )内にはコールバック関数が入る

   const cb = () => {
   	alert('intersecting');
   }
   const io = **new IntersectionObserver(cb);**
   

2. 1. に、監視したい対象のDOMを.observe() メソッドを使って登録する。これで監視がスタートする。（今回はchildを監視する）

   const child = document.querySelector('.child');
   const cb = () => {
   	alert('intersecting');
   }
   const io = new IntersectionObserver(cb);
   **io.observe(child);** //childを監視
   

これで、IntersectionObseverの監視によって、child要素が

・画面内に入ったとき

・画面外に出ていったとき

にcbというコールバック関数が毎度呼ばれることになる。

▼複数要素に同じIntersectionObserverをセットしたい場合

• entry.isIntersecting ：監視中の要素が画面と交差しているかどうか。交差していればtrue