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

Barbara Streisand
リリース: 2024-10-30 02:16:29
オリジナル
757 人が閲覧しました

How to Detect When a User Scrolls to the Bottom of a Div in jQuery?

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

「」を特徴とする動的コンテンツを持つ div 要素を作成しました。自動」オーバーフロー設定。ユーザー エクスペリエンスを向上させるには、ユーザーがこの div ボックスの一番下までスクロールしたときに追加のコンテンツを読み込む必要があります。ただし、その特定のイベントを検出する方法がわかりません。

この検出の鍵は、特定の jQuery プロパティとメソッドを利用することにあります。

  • $().scrollTop():要素がスクロールされたピクセル数を示します
  • $().innerHeight(): 要素の内側の高さを表します
  • DOMElement.scrollHeight: 要素のコンテンツの高さを返します

ユーザーが div の最後に到達したかどうかを判断するには、最初の 2 つのプロパティの合計を 3 番目のプロパティと比較します。これらの値が一致すると、div の終わりに達しています。

<code class="javascript">jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});</code>
ログイン後にコピー

このソリューションは、jQuery バージョン 1.7 でのイベント処理に推奨される on() メソッドを利用します。

追加メモ:

  • イベント リスナーは、監視対象の要素を表す #flux ID を持つ div にアタッチされます。
  • アラート() 関数はデモンストレーションの目的で使用されます。追加コンテンツをロードするための独自のロジックをここに含めることができます。
  • 実際の例は http://jsfiddle.net/doktormolle/w7X9N/ にあります。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!