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; }); }
リファレンス
https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API
関連記事
-
-
JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...
-
-
JavaScriptで後から追加した要素にイベントを割り当てる方法と挙動の違いについて
jQueryで後から追加した要素に対してイベントを割り当てる場合、いつもと異なる ...
-
-
JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...
-
-
JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法
JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...
-
-
jquery.cookie.jsで「$.cookie is not a function」エラー
フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...