ユーザーが非ウィンドウ要素の一番下までスクロールしたことをどのように検出できますか?

非ウィンドウ要素の下部へのスクロールの検出

Facebook で採用されているようなページネーション システムは、ユーザーがウィンドウ要素に近づくと追加のコンテンツを読み込みます。ページの一番下。これを達成するには、ユーザーが表示されているウィンドウを超えて一番下までスクロールしたかどうかを判断することが重要です。

jQuery を使用したソリューション:

jQuery は、以下の効率的な方法を提供します。スクロールアクティビティを監視します。 window オブジェクトの .scroll() イベント ハンドラーを利用すると、スクロール位置が変更されるたびにトリガーするリスナーを確立できます。次のコードは、ユーザーがページの下部に到達したことを検出する方法を示しています。

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

このコードは、ページの上部からユーザーの現在のスクロール位置 ($(window)) までの距離を計算します。 scrollTop()) を呼び出し、それを表示ウィンドウの高さに追加します ($(window).height())。この合計がドキュメントの合計の高さ ($(document).height()) と等しい場合、ユーザーが一番下までスクロールしたことを意味します。

一番下までの近接度の決定:

別のシナリオとして、ユーザーが正確に底に到達するのではなく、底に近づいていることを検出することが考えられます。これを実現するには、次のようにコードを少し変更します。

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

このコードは、ユーザーが下から 100 ピクセル以内にスクロールすると、「下近く」アラートをトリガーします。必要に応じて「100」の値を調整して、目的の近接しきい値を定義します。

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