JavaScriptのIntersectionObserverを利用して指定した要素が表示されているか確認する方法

ブラウザ上で指定した要素が表示されているかチェックし、表示されている場合は何らかのイベントを実行したい。JavaScriptのscrollイベントで対応しようと思ったが、これだとスクロールの度に実行されるので負荷がかかる。IntersectionObserverを使うことで負荷軽減できるみたいなので実装方法をメモ。

サンプル

https://taitan916.info/sample/IntersectionObserver/

スクロールして「ターゲット」部分が表示されるとページ上部が「非表示→表示」に切り替わる筈。

実装方法

ソースコード

<div class="contents">コンテンツ</div>
<div class="target">ターゲット</div>
<div class="contents">コンテンツ</div>
<div class="check"></div>

<script>
const target = document.querySelector(`.target`);
const options = {
    root: null, //ターゲットが見えるかどうかを確認するためのビューポート
    rootMargin: `0px`, //rootの周りのマージン
    threshold: 1, //ターゲットがどのくらいの割合で見えているか
};
const observer = new IntersectionObserver(displayCheck, options);
observer.observe(target);

function displayCheck(entries){
    entries.forEach(entry => {
        const text = ( entry.isIntersecting ) ? `表示` : `非表示`;
        document.querySelector(`.check`).innerText = text;
    });
}

監視を終了したい場合

今回のケースだと表示・非表示を切り替えるため常時監視で問題無いが、指定した要素が表示されたら1度だけイベントを実行したい、といったような場合はunobserve()で監視を停止すること。

リファレンス

https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver

https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API