良く忘れるので、備忘録というか、コピー＆ペースト元としてまとめます。
タイトル通り、とある要素が一番下までスクロールされたことを検知する方法です。
こちらの書き方は、例えば一番下までスクロールされたらデータを追加読み込みする、といったときに使えます。
なお、今回の書き方は、要素の高さを指定していて、かつ overflow-y: scroll; を指定している時の書き方です。
それ以外の場合だと正しく動作しないので、ご注意ください。
今回参考にさせていただいた記事はこちら。
JavaScriptのスクロールイベントの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
https://techacademy.jp/magazine/21124jQuery・JavaScript 高さ、横幅取得方法 – Qiita
https://qiita.com/ypyp/items/c4b76e85f32b1f0cd577
それぞれ、スクロールイベントの書き方とスクロール位置を取得する時と、要素の高さを取得する時に参考にさせていただきました。
実際に書いたサンプルコードはこちら。
まず、HTML と CSS です。
<div id='scroll-area'> <p>スクロール</p> </div>
div {
width: 500px;
height: 400px;
overflow-y: scroll;
}
p {
height: 1000px;
width: 100%;
}
で、JavaScript がこちらです。
const element = document.getElementById('scroll-area');
const clientHeight = element.clientHeight;
const scrollHeight = element.scrollHeight;
element.onscroll = function() {
if (scrollHeight - (clientHeight + this.scrollTop) == 0) {
alert('一番下です！');
}
};
まず、ID を指定して <div> 要素を取得します。
次に、clientHeight と scrollHeight を使って、要素の高さを取得します。
これらの違いですが、まず clientHeight は、padding を含む、画面に表示されている分だけの高さを取得します。
上のサンプルコードでは、clientHeight は 400 で、<div> 要素の高さと一致しています。
一方、scrollHeight も padding を含んだ高さですが、こちらは画面に表示されていないコンテンツの高さも含まれます。
なので、スクロールが発生して表示されていない分の高さも取得できます。
上のサンプルコードでは、scrollHeight は 1032 で、<p> 要素の高さ 1000px プラス、上下の padding の 32px を足した値になります。
あとは、4～8行目でスクロールが行われているときに、スクロール位置と clientHeight の高さを足した値と scrollHeight を比較します。
こちらの値が 0 になったら、一番下までスクロールされた、ということになるので、とりあえず alert を表示しています。
こちらは任意の処理に書き換えてください。
処理としては以上です！
そんなに複雑な処理はしていないので、比較的分かりやすいのではないでしょうか。
以上、JavaScript で要素が一番下までスクロールされたことを検知する方法でした。
ご参考になれば幸いです。
