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
関連記事
-
-
Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法
Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...
-
-
JavaScriptで指定したURLの最終パス名(ディレクトリ)を取得する方法
JavaScriptで「https://taitan916.info/blog/ ...
-
-
jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法
GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...
-
-
バニラJavaScriptでinputタグのtypeをtext⇔passwordに変更する方法
チェックボックスの状態によってinputタグのtypeをtext⇔passwor ...
-
-
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...