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で日時のフォーマットをISO 8601型とDateTime型を相互に変換する方法
先日PHPで日時のフォーマットをISO 8601型とDateTime型を相互に変 ...
-
-
Video.jsで表示させた動画プレイヤーにロゴ画像(透かし)を追加する方法(videojs-logo)
Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし ...
-
-
JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法
PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...
-
-
サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法
サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...
-
-
JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法
ページを開いた際に指定したテキストボックス(input type="text") ...