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
関連記事
-
-
jQueryにて$.parseHTML()を用いてHTML文字列をDOMノードに変換する方法
あるサイトのソースコードを拝見しているとjQueryで$.parseHTML() ...
-
-
サイトにHTMLエディタ(WYSIWYG)を導入する方法
シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...
-
-
JavaScriptにてスワイプ可能なLightBox系ライブラリ「PhotoSwipe」の利用方法
あるサイトをWappalyzerで調査していた際に「PhotoSwipe」という ...
-
-
JavaScriptで文字列から数値(特に小数)へ変換時の注意点
JavaScriptで文字列から数値へ変換時に想定していた結果と異なることがあっ ...
-
-
jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法
メールアドレスを入力するためのテキストボックスに文字を入力すると「@yahoo. ...