勉強したことのメモ

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

  関連記事

ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法

CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...

JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法

「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...

jQuery UIのDatepickerでリセット(入力内容消去)ボタンの追加方法

jQuery UIのDatepickerでキーボード入力を防ぎたいためreado ...

AjaxのJSONP使用でPHPで作った配列をJSに返す方法

AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...

画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法

amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...