2025.07.28

【備忘録】対象ブロックが画面に表示されたらスクリプトを発火させる方法（JavaScript）

Web制作

こんにちはMaromaroのTakaです。

今回はJavaScriptで対象ブロックがブラウザ内に表示されたらスクリプトを発火させる方法を紹介します。

よく使われる手法として、対象ブロックのoffsetを取得し、
scrollイベントを用いてscrollTopが対象ブロックのoffsetを超えたら発火させるものが一般的かと思いますが、もう少し簡単な方法があるので紹介します。

今回紹介するのはJavaScript APIのIntersectionObserverです。
2016年以降に標準的なブラウザで使用出来るようになりました。
特にプラグインの導入も無く使用できます。

これは何かというと、対象DOM 要素がビューポートと交差するタイミング を非同期に検出できるブラウザ API です。
要はブラウザに対象が表示されたか検出して色々できるということですね。

標準的な記述としては以下のようになるかと思います。

//対象の要素を指定
const targets = document.querySelectorAll(".observer");
// オプション
const options = {
  root: null, //交差判定の基準　nullの場合はブラウザ基準となる。DOMを指定することが可能
  rootMargin: "0px", //交差判定エリアのマージンを設定 100px 0px と記載すれば上下100px早めに判定される マイナスにすればその逆となる
  threshold: 0.5, //交差率のしきい値　対象ブロックがn％（0~1）画面に表示されたら発火するかの設定
};

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      //ターゲットがブラウザ内に入ったら発火
      //以下はクラスを追加
      entry.target.classList.add("in-view"); 
    }
  });
};

//オブザーバーの作成と監視スタート
const observer = new IntersectionObserver(callback, options);
targets.forEach((target) => observer.observe(target));

observerという名前のクラスをつけたDOMが画面内に50%入ったら発火して、in-viewというクラスを付与するコードになっています。

例として以下に実際に動かしたものを紹介します。

See the Pen Untitled by 佐々木貴徳 (@efhpwfmt-the-animator) on CodePen.

上記はスクロールしていくと赤いブロックの色を変更するものになります。

オプションにあるthresholdを0.5に設定しているので、ブロックが画面内に50%表示されたら発火するようになっています。
このオプションは0に設定した場合は、1pxでも画面に表示されたら発火します。

注意点としては、画面内に対象ブロックが表示された面積の割合となるので、
対象ブロックがブラウザよりはるかに大きいものを選ぶと、thresholdの設定次第では発火しなくなる恐れがあります。

特に面倒な記述もなく実装できるので、オススメのJavaScript APIです。

以上Takaでした。

Web制作