[解決済み】jQueryでユーザーがdivの一番下までスクロールしたことを検出する方法

質問

私は、内部に可変量のコンテンツを持つdivボックス（fluxと呼ばれる）を持っています。 この divbox の overflow は auto に設定されています。

今、私がやろうとしていることは、ユーザーがこのDIV-boxの下までスクロールしたときに、ページにさらにコンテンツをロードすることです。この方法（コンテンツをロードする）はわかっていますが、ユーザーがdivタグの下までスクロールしたことを検出する方法がわかりません。 ページ全体に対して行うのであれば、.scrollTop を取って、.height からそれを差し引きます。

でも、ここではそれができないようですね？

fluxから.scrollTopをとって、innerというdivの中にすべてのコンテンツを入れてみたのですが、fluxのinnerHeightをとると564px（divの高さは500に設定）、「inner」の高さは1064、スクロールトップはdivの下にあるときに564と返されます。

どうしたらいいのでしょうか？

解決方法は？

使用できるプロパティ/メソッドがあります。

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

つまり、最初の2つのプロパティの合計をとって、それが最後のプロパティと等しくなれば、終わりに到達したことになるわけです。

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

http://jsfiddle.net/doktormolle/w7X9N/

編集：通り、'bind'を'on'に更新しました。

jQuery 1.7 では、イベントハンドラをドキュメントにアタッチする方法として .on() メソッドが推奨されています。