ユーザーがJavaScriptを使用してページの一番下までスクロールしたことを検出する方法

ユーザーが生のJavaScriptを使用してページの一番下に向かってスクロールダウンしたことを検出する方法を学びます。

ユーザーがページの一番下または特定のセクションにスクロールしたときに、イベントをトリガーしたい場合があります。

下部の検出までスクロールします（最新のすべてのブラウザー、IE9で機能します）以上）

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

エッジケースソリューション：

最初のものが機能しない場合は、Math.ceil()を使用してみてください window.pageYOffsetのメソッド ：

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 InternetExplorerでは機能しません。最新のブラウザ間の互換性については、pageYOffsetを使用してください 。

これが実用的な例を示すCodePenです。

window.innerHeight間の関係について混乱している場合 、window.pageYOffset 、およびdocument.body.offsetHeight スクロールしたときにそれぞれのピクセル値をログに記録する小さなヘルパー関数は次のとおりです。

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 混乱した。 現在の数を指します ピクセルは上から垂直にスクロールしました。