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でinputタグのtypeをtext⇔passwordに変更する方法
チェックボックスの状態によってinputタグのtypeをtext⇔passwor ...
-
ajaxで複数のデータを渡したい
やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...
-
JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)
JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...
-
Leafletにて表示されているマップを画像としてダウンロードさせる「leaflet-easyPrint」の利用方法
Leafletにて何らかのボタンをクリックすると表示されているマップを画像として ...
-
マウスオーバーでの画像切り替えをJavaScriptで簡単に対応
マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...