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

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

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

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

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

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop()   $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

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

補足:

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