メインウィンドウで最下部にスクロールした時の検知方法は他の記事でも見かけますが、サブウィンドウでの検知方法が見当たらなかったのでまとめました。
お急ぎの方はソースコードだけコピペして頂ければと思います。
下記のようなレイアウトで、サブウィンドウ内のスクロールが最下部まで到達したら検知し、非同期でデータを取得するケースがあるかと思います。
仮に全体の黒い領域を高さ500pxとした場合、ウィンドウで表示されている高さが300pxとします。
青い領域が黒い領域の最下部まで到達したら検知したいので、500px – 300px = 200px下へ移動したら検知をすれば良さそうです。
<!-- 青い領域 -->
<div id="smallWindow" style="overflow: auto; height: 300px;">
<!-- 黒い領域 -->
<ul id="contentsArea" style="height: 500px;">
<li>コンテンツ１</li>
<li>コンテンツ２</li>
<li>コンテンツ３</li>
.
.
.
</ul>
</div><script language="javascript" type="text/javascript">
window.onload = function(){
// 青い領域のelement
let smallWindow = document.getElementById("smallWindow");
// 青い領域の高さ(データ取得後に再取得する必要があるためグローバルとして定義)
// getBoundingClientRect()を使用することにより小数点を考慮したheightが代入できます
smallWindowHeight = document.getElementById("smallWindow").getBoundingClientRect().height();
// 黒い領域の高さ(データ取得後に再取得する必要があるためグローバルとして定義)
contentsAreaHeight = document.getElementById("contentsArea").getBoundingClientRect().height();
// 黒い領域の高さ - 青い領域の高さ = スクロール量(200px)
bottomPoint = contentsAreaHeight - smallWindowHeight;
// 青い領域のサブウィンドウがスクロールした際のイベント
smallWindow.addEventListener('scroll', () => {
// 現在のスクロール量を取得
var current = document.getElementById("smallWindow").scrollTop;
// スクロール量が200pxを超えたらログ出力
if (bottomPoint <= current) {
console.log("HIT!");
}
});
}
</script>ログ出力している箇所で、非同期でデータを取得して描画する処理を入れれば負荷も最小限でコンテンツを読み込むことができます。
その場合、黒い領域の高さと検知するスクロール量を更新する必要があります。
// スクロール量更新
bottomPoint += contentsAreaHeight;上記処理を非同期でのデータ取得完了後に追加すればOKです。
不明点などありましたらコメントにてお願い致します。
最後まで読んで頂きありがとうございました😊