ユーザーが Web ページの一番下までスクロールしたことを検出するにはどうすればよいですか?

ブラウザ ウィンドウのスクロール位置の決定

Web 開発では、多くの場合、ユーザーが Web ページの下部に到達したかどうかを検出する必要があります。これにより、スクロール位置に基づいてコンテンツの自動読み込みやその他のアクションが可能になります。

スクロールの終わりを検出する方法

ユーザーが一番下までスクロールしたかどうかを確認するにはページの場合は、window.onscroll イベント リスナーを利用できます。このイベントは、ユーザーがページをスクロールするたびに発生し、リアルタイムでスクロール位置を追跡できるようになります。

次の JavaScript コード スニペットは、スクロールの終了を検出する方法を示しています。

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

このコードは、現在のスクロールの高さを計算します。これは、ビューポートの高さ (window.innerHeight で決定) と現在のスクロール オフセット (Math.round(window.scrollY) で計算) の合計です。次に、この値を document.body.offsetHeight を使用して取得したドキュメントの合計の高さと比較します。この計算されたスクロールの高さがドキュメントの高さ以上である場合は、ユーザーがページの下部またはその付近にいることを示します。

デモ

提供されたコードを Element.scrollIntoView() メソッドと組み合わせて使用​​すると、コンテンツが追加されたときにユーザーを要素の一番下まで自動的にスクロールできます。

この機能の実際の例については、を参照してください。次のデモへ:

[デモ リンク]

このコードを実装すると、スクロール位置を効果的に追跡し、ユーザーがアクセスしたときに、新しいコンテンツの読み込みやページ動作の変更などの必要なアクションを実行できます。ウェブページの下部。

以上がユーザーが Web ページの一番下までスクロールしたことを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。