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

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 サイトの他の関連記事を参照してください。