勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

ブラウザ上で指定した要素が表示されているかチェックし、表示されている場合は何らかのイベントを実行したい。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;
    });
}

 

リファレンス

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

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

 - JavaScript

  関連記事

Leafletにアイコン(ボタン)を設置できる「Leaflet.EasyButton」プラグインの利用方法

先日「leaflet-tag-filter-button」プラグインのCDN呼び ...

バニラJavaScriptでdisplay:none/blockの切り替え方法

指定要素の表示非表示を切り替える場合jQueryだとhide/show使うか、t ...

バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法

先日バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装でき ...

JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)

JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...

aタグにてhref属性の「javascript:void(0);」の代替手段について

aタグにJavaScriptやjQueryでイベントを割り当てたい場合、href ...