IntersectionObserverのrootMarginをわかりやすく説明

javascript（jquery）でこの要素が画面に出てきたらふわっと表示する、画像が表示されたら読み込む（遅延読み込み）、こういう処理って昔はスクロールイベントを使っていましたよね。

でもスクロールイベントはスクロールするたびに発生するんで負荷がすごい。ページの表示が遅くなったりカクついたり。

そこでこういう画面に表示されたらなにかする、ていうのを簡単に実装できる「IntersectionObserver」というのが最近のブラウザでは使えるようになっています。

ここではIntersectionObserverで設定できる「rootMargin」について例を交えながらわかりやすく紹介したいと思います。

1. IntersectionObserverおさらい
2. rootMarginとは
1. ①画像遅延読み込みのケース
2. ②画面中央付近でふわっとさせたいケース
3. まとめ

IntersectionObserverおさらい

IntersectionObserverのrootMarginについてみる前にまずはIntersectionObserverのおさらいから。

var myIntersection = function(entries){
  entries.forEach(entry =>{
    var target = $(entry.target);
    if(entry.isIntersecting){
      target.addClass('show');
    }else{
      target.removeClass('show');
    }
  });
}
var observer = new IntersectionObserver(
  myIntersection,
  {
    root: null,
    rootMargin: "0px 0px 0px 0px",
    threshold: 0
  }
);
observer.observe( $("#fuwatto-object1")[0] );
observer.observe( $("#fuwatto-object2")[0] );

なくても大丈夫なんですが今回はjqueryを使ってます。

最後の方の「#fuwatto-object1")[0]」の[0]はjqueryの時にjavascriptのDOMにアクセスするときの書き方となってます。

さて、とりあえずこれで#fuwatto-object1と#fuwatto-object2が画面に表示されたタイミングで「show」というクラスが付与されるようになります。また画面の外にいくと今度は「show」クラスが削除されます。

cssのshowクラスでなんかいい感じのアニメーションを設定してやればOK。

たったこれだけで、画面スクロールで表示されるたびにアニメーションさせることができる、というわけです。

ハイ、これでIntersectionObserverのおさらい終了！では肝心の「rootMargin」についてみていきましょう。

rootMarginとは

では満を持してIntersectionObserverのrootMarginとは？を見ていきましょう。

たぶん使用ケースとrootMarginの設定例見る方が早いしわかりやすいんで、それでサクッと理解しちゃいましょう。

①画像遅延読み込みのケース

表示速度の向上のためIntersectionObserverを使って画像を都度遅延読み込みするケースです。

イメージとしては、画像が画面内に入るちょっと前に読み込みをして、ユーザーには画像が遅延読み込みされてるのをまったく意識させない、そんなケースを考えてみましょう。

このケースだと画像が画面に入る手前にIntersectionObserverイベントを発生させるわけですよね。

var observer = new IntersectionObserver(
  myIntersection,
  {
    root: null,
    rootMargin: "0px 0px 100px 0px",
    threshold: 0
  }
);

「rootMargin」の3つ目、つまり下方向だけ100pxにしてます。

これで画面に要素が入る100px前にIntersectionObserverイベントが発生するようになります。

②画面中央付近でふわっとさせたいケース

今度はスクロールしてて、画面に表示されるとすぐふわっと表示させるんじゃなくて、ある程度画面の中央でふわっと表示させたいケースです。

var observer = new IntersectionObserver(
  myIntersection,
  {
    root: null,
    rootMargin: "0px 0px -20% 0px",
    threshold: 0
  }
);

今度は「rootMargin」の3つ目の下方向marginを-20%にしてます。

これで画面の下部20%には当たり判定がなくなって、スクロールで21%目に要素が入ればイベントが発生するようになります。

rootMarginの注意点

上の例でもrootMarginに0pxやらを設定していますが、まずよくミスりやすいところしてrootMarginは数字だけだと動きません。rootMarginには必ず”px”とか”%”とか単位を添えてやる必要があります。

例にあるように「0px 0px 0px 0px」と普通のmarginと同じで上下左右個別に設定もできるし、もちろんまとめて「0px」みたいに書いてもOK。

まとめ

IntersectionObserverのrootMarginについて紹介しました。

基本的に3つ目の数字、つまり下方向のマージンしか設定しないとは思いますが、とりあえず当たり判定の領域を変えてるイメージ。

ネガティブマージンにすると当たり判定を狭められて、普通のマージンにすると当たり判定を画面外までのばせる、的な。

スクロールよりなんか処理的にスマートだしぜひ参考に使ってみてくさいね。

（次：IntersectionObserverのthresholdをわかりやすく紹介）