【jQuery・js】交差オブザーバー(Js Intersection Observer)

[公開] 2024-07-27 / [更新] 2024-08-16

Intersection Observer は特定の要素が領域内に入ったかどうかを検知するAPIです。

「特定の要素が可視領域に入ったら」を監視するので、DOMの負担も少なくパフォーマンス面からも推奨されています。

従来の scrollイベントは、スクロールするたびに関数を呼び出すもの。
画面サイズが変われば再計算が必要ですし、常にDOMを動かすので、パフォーマンス(ページスピード等)への悪影響は否めません。

近年のページスピード重視の流れを考えると「scrollイベントはあまり使いたくない…」
そんな時の助けになるのが Intersection Observer です^^

Intersection Observer の使い方

Observer実装は結構シンプルで、ターゲット要素、オプション、実行関数だけ設定すればOK。
あとはcssで煮るなり焼くなりw ^^;

jQuery・Js code

const target = document.getElementById("ターゲットID"); //ターゲット指定
 
const options = { //オプション設定
  root: null,
  rootMargin: 0px,
  hreshold: 0
};
 
const observer = new IntersectionObserver(callback, options); //オブザーバー呼び出し
 
observer.observe(target); //root(optiobs)とターゲットが交差したら発火
 
function callback() { //実行する動作
  target.classList.add('show');
}

options の設定

options は３種類。初期値でよければ記載不要です。

options	初期値	説明
root:	`null=ブラウザビューポート`	「画面に入ったら」なら初期値でOK 「特定のBoxで」ならそれを指定します
rootMargin:	`0px`	`root` からの距離 `css` の `margin` と同じです
hreshold:	`0`	関数を実行するタイミングを、ターゲットの交差量 0〜1 の間で指定 `0 = 0%` ターゲットが交差し始めた瞬間 `0.5 = 50%` ターゲットが50%交差した時 `1 = 100%` ターゲットが全て見えた時 `[0, 0.5, 1]` のように配列形式もOK `0、50％、100％`の時に関数が呼ばれます

複数の要素をターゲットにする

当サイトのトップページに利用しているコードで、item というclass名を持つ要素を全て対象にしています。
options は全て初期値のままなので設定していません。

jQuery・Js code

const target = document.querySelectorAll('.item');

const observer = new IntersectionObserver(callback);
target.forEach((tgt) => {
  observer.observe(tgt);
});

function callback(entries) {
  entries.forEach((entry) => {
    const target = entry.target;
    if (entry.isIntersecting) {
      target.classList.add('show');
    } else {
      target.classList.remove('show');
    }
  });
}