「スクロールして表示領域に入ったら―」を実現する場合、これまで盛んに使われてきた方法として、スクロールのイベントを監視する方法がある。しかし、この方法はスクロールの度にイベントが実行されてしまうので、当然かなり負荷がかかるものであることは想像に難くない。 なので、その代替として登場したのが、「Intersection Observer（インターセクションオブザーバー）」で実現する方法だ。 Intersection Observer は、「要素と要素が交差しているか？」を監視するもので、これを使って命題である「スクロールして表示領域に入ったら―」を実現することができる。 正直プラグインにする必要はあまりないような気もするが、次に使うときに迷わないようにjQueryのプラグイン化しておいた。下記からソースとサンプルをダウンロードできる。 ### jquery.intersection.js [ダウンロード](https://github.com/chaordicorg/intersection/) [サンプル](https://chaordicorg.github.io/intersection/dist/sample.html) **** ### 使用例 $('body').intersection({ "root": null, // ルートの要素（nullでビューポイント） "rootMargin": "-50%", // ルートとの重なりを判定する領域(上右下左) "threshold": 0, // targetの閾値(0で0%、1で100%で全身) "target": ".box", // rootとの交差を監視する要素 callback: function(el){ console.log(el); } }); **target** で指定した要素が、**root** で指定した要素と交差すると、交差した target のエレメントをコールバックします。ほとんどの場合、root の値は省略（null）でかまいません。その場合 root はビューポイント、つまりブラウザのウィンドウが root になります。 返却されたエレメントをjQuery形式で扱いたい場合は以下のように指定してください。 $dom = $(_dom); **** ### 「rootMargin」の例 "rootMargin": "0px 0px -100% 0px", //一番上(上右下左) "rootMargin": "0px 0px -90% 0px", //一番上から10%(上右下左) "rootMargin": "0px", //一番下 "rootMargin": "-50%", // 天地の中心 ※値が0でも単位（pxや％）が必要になります。 ※ルートとターゲットは親子関係でなければなりません。 **** ### 「threshold」の例 "threshold": 0, // rootと交差したら "threshold": 0.5, // rootと50%交差したら "threshold": 1, // rootと100%交差したら（つまり、rootとすべて重なったら） threshold: [0, 0.5, 1.0] // 交差領域が50%変化するたびに発火 **** ### 対応ブラウザ [Can I use](https://caniuse.com/intersectionobserver)によると、各主要ブラウザのIntersection Observer 対応状況は以下のようになる。 http://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/14/0001.png Intersection Observerの事が書かれた2019年の記事では、iOS/Safaiが未対応とあったが、iOS12.2 から対応していることがわかる。もう更新されることがないIEで動作させる場合には、例えば以下のようにPolyfillを読み込んで対応する必要がある。 ※＜head＞内で jquery.intersection.js の読み込みより先に実行してください。 var userAgent = window.navigator.userAgent.toUpperCase(); if (!(userAgent.indexOf('MSIE') === -1 ＆＆ userAgent.indexOf('TRIDENT') === -1)){ document.write(''); } **** ### 参考 ・[Intersection Observerの使い方！時間差スクロールイベントのサンプル付き](https://myscreate.com/intersection-observer/) ・[使ってみよう！Intersection Observer！](https://qiita.com/ryo_hisano/items/42f5980720bc832e6e09) ・[Intersection Observerで要素が画面内に入ったときにアニメーションや自動スクロールをスタートする](https://www.hypertextcandy.com/intersectionobserver-usecases)