浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】要素が一番下までスクロールされたことを検知する方法

良く忘れるので、備忘録というか、コピー&ペースト元としてまとめます。
タイトル通り、とある要素が一番下までスクロールされたことを検知する方法です。
こちらの書き方は、例えば一番下までスクロールされたらデータを追加読み込みする、といったときに使えます。

なお、今回の書き方は、要素の高さを指定していて、かつ overflow-y: scroll; を指定している時の書き方です。
それ以外の場合だと正しく動作しないので、ご注意ください。

今回参考にさせていただいた記事はこちら。

JavaScriptのスクロールイベントの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
https://techacademy.jp/magazine/21124

jQuery・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> 要素を取得します。

次に、clientHeightscrollHeight を使って、要素の高さを取得します。
これらの違いですが、まず clientHeight は、padding を含む、画面に表示されている分だけの高さを取得します。
上のサンプルコードでは、clientHeight は 400 で、<div> 要素の高さと一致しています。

一方、scrollHeight も padding を含んだ高さですが、こちらは画面に表示されていないコンテンツの高さも含まれます。
なので、スクロールが発生して表示されていない分の高さも取得できます。
上のサンプルコードでは、scrollHeight は 1032 で、<p> 要素の高さ 1000px プラス、上下の padding32px を足した値になります。

あとは、4~8行目でスクロールが行われているときに、スクロール位置と clientHeight の高さを足した値と scrollHeight を比較します。
こちらの値が 0 になったら、一番下までスクロールされた、ということになるので、とりあえず alert を表示しています。
こちらは任意の処理に書き換えてください。

処理としては以上です!
そんなに複雑な処理はしていないので、比較的分かりやすいのではないでしょうか。

 

以上、JavaScript で要素が一番下までスクロールされたことを検知する方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)