勉強したことのメモ

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

  関連記事

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

JavaScriptでURLのクエリを取得する2

直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...

formでGET送信時に空のパラメータを送信しない方法(cleanQuery)

フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...

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

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

JavaScriptで指定したURLの最終パス名(ディレクトリ)を取得する方法

JavaScriptで「https://taitan916.info/blog/ ...