ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryを使用して、ユーザーが可変コンテンツを含むDivの最後に到達したことを検出するにはどうすればよいですか?

jQueryを使用して、ユーザーが可変コンテンツを含むDivの最後に到達したことを検出するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-30 20:00:03357ブラウズ

How to Detect When a User Has Reached the Bottom of a Div with Variable Content Using jQuery?

jQuery を使用した Div スクロールの終わりの検出

目的:
ユーザーがいつ一番下までスクロールしたかを判断する指定された div 要素の。

質問:
可変量のコンテンツと自動に設定されたオーバーフローでユーザーが div の最後に到達したことをどのように検出できますか?

答え:

div スクロールの終わりを検出するには、次の jQuery プロパティ/メソッドを使用します:

  • $()。 scrollTop(): 要素が水平または垂直にスクロールされた量を返します。
  • $().innerHeight(): 要素の内側の高さを返します。
  • DOMElement.scrollHeight: 要素のコンテンツの高さを返します。

最初の 2 つのプロパティを組み合わせて表示される合計の高さを取得し、それをscrollHeightと比較して決定します。ユーザーが一番下までスクロールしたとき。

<code class="javascript">jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('End of div reached');
        }
    })
});</code>

追加メモ:

  • 提供されるコードは jQuery 1.7 構文を使用します。古いバージョンの場合は、.on() の代わりに .bind() を使用してください。
  • このソリューションは、div 内のコンテンツが動的に追加または削除された場合でも適切に機能します。
  • イベント ハンドラーを調整します。好みのコンテナーとアクションに追加します。

以上がjQueryを使用して、ユーザーが可変コンテンツを含むDivの最後に到達したことを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。