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

製作 プログラム

最終更新日:2021/03/25

ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

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をわかりやすく紹介

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: グラビアアイドルになるチャンス / 炭酸水サーバー・ザ儀式 / 超カンタン絶品カンパンレシピ /