JavaScriptだけでページ最下部へのスクロールを検知する方法

ライブラリ不要の素のJavaScript(バニラJS)だけでも、ユーザーがページの下部へスクロールしたタイミングを簡単に検知できます。この記事では、基本的な実装方法から、ブラウザごとの挙動の違いへの対処法まで解説します。

「ユーザーがページ(または特定のセクション)の最下部までスクロールしたら、イベントを発火させたい」という場面はよくあります。無限スクロールで次のコンテンツを読み込む場合や、フッターに到達したことを通知したい場合などがその例です。

最下部へのスクロール検知の基本(モダンブラウザおよびIE9以降で動作)

window.onscroll = function() {
 if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
  alert('At the bottom!')
 }
}

エッジケースへの対処法

上記のコードがうまく動作しない場合は、window.pageYOffsetに対してMath.ceil()メソッドを使ってみてください。

window.onscroll = function() {
  if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
  alert('At the bottom!')
  }
}

Math.ceilを使う理由は、一部のブラウザが要素の寸法にサブピクセル精度を採用しているためです。たとえば、幅や高さが「500.25px」のような小数値になることがあります。

Math.ceilは数値を切り上げるメソッドです。たとえば1.45pxは2pxとして扱われます。

また、一部のMac環境ではウィンドウの高さが1pxずれて計算されるという問題も報告されています。これを回避するには、ドキュメントの高さから数ピクセル分差し引いて比較するとよいでしょう。

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

補足:scrollYもpageYOffsetの代わりによく使われますが、scrollYはInternet Explorerでは動作しません。クロスブラウザ対応を重視するならpageYOffsetを使用しましょう。

実際に動作するサンプルがCodePenで公開されていますので、ぜひ手を動かして試してみてください。

スクロール検知の仕組みを理解するためのヘルパー関数

window.innerHeight、window.pageYOffset、document.body.offsetHeightの3つの関係がわかりにくいと感じたら、スクロールするたびにそれぞれのピクセル値をコンソールに出力する次の関数を使ってみましょう。

window.onscroll = function() {
  console.log('Window height (px):', window.innerHeight)
  console.log('Currently scrolled from top (px):', window.pageYOffset)
  console.log('Document height(px):', document.body.offsetHeight)   
}

このコードを実行してコンソールを観察すれば、スクロール検知の仕組みがつかみやすくなります。筆者も最初はpageYOffsetが混乱のもとでした。pageYOffsetとは、ページ最上部から現在縦方向に何ピクセルスクロールしているかを表す値です。

最後に、3つのプロパティの役割を整理しておきます。

• window.innerHeight:ビューポート(画面の表示領域)の高さ
• window.pageYOffset:現在の縦方向のスクロール量
• document.body.offsetHeight:ドキュメント全体の高さ

「表示領域の高さ + スクロール量」が「ドキュメント全体の高さ」以上になった瞬間、それが最下部に到達したことを意味する――これがスクロール検知の基本的な仕組みです。