勉強したことのメモ

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

  関連記事

jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法

メールアドレスを入力するためのテキストボックスに文字を入力すると「@yahoo. ...

PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法

ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...

JavaScriptで文字列から数値(特に小数)へ変換時の注意点

JavaScriptで文字列から数値へ変換時に想定していた結果と異なることがあっ ...

jQueryで特定のdata属性をセレクタとして指定する方法

jQueryで特定のdata属性をクリックした際に何らかのイベントを実行したかっ ...

jQueryでformの各種パーツ(テキストボックス等)の操作まとめ

jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...