ユーザーが JavaScript の要素の最後に到達したことをどのように検出できますか?

任意の要素上のユーザーのスクロール位置を決定する方法

ページネーション システムを実装する場合、ユーザーが Web ページの下部に到達したことを検出するか、特定の要素が重要です。これにより、新しいコンテンツをタイムリーに読み込むことができ、ユーザー エクスペリエンスが向上します。

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

一般的なアプローチは、JavaScript で window.scroll() イベント リスナーを使用することです。 、ユーザーがページをスクロールするたびにトリガーされます。以下は、ドキュメント全体が下部までスクロールされたことを検出する jQuery の例です。

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    // Trigger Ajax query to load more content
  }
});

このコードは、ビューポートの上部から下部までの距離 (scrollTop) を計算し、ビューポートの高さを追加します。 。この合計がドキュメントの全体の高さと等しい場合、ユーザーが最後に到達したことがわかります。

底部への近接度の決定

コンテンツをロードする前にコンテンツをロードしたい場合は、ユーザーが最下位に達したら、次のように条件を調整できます:

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    // Trigger Ajax query to load more content
  }
});

ここでは、合計がドキュメントを超えているかどうかを確認します。高さから 100 ピクセルを引いた値 (この値を希望のしきい値に調整します)。

以上がユーザーが JavaScript の要素の最後に到達したことをどのように検出できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。