0

次のような要素があります。

<div id="threads-list" style="overflow-y: scroll; height: 200px;">
// Posts
</div>

ユーザーがボタンに達したとき (またはボタンから 10px になったとき) に alert() を呼び出すにはどうすればよいですか?

これは私が今試していることです：

$('#threads-list').scroll(function() {
    if ($('#threads-list').height() + $('#threads-list').scrollTop() == document.getElementById('threads-list').offsetHeight) {
        console.log('do');
        }
    });

問題は、コンテナの高さである .height() (両方とも 200px) と同じ値を返す .offsetHeight にあるようですが、コンテンツの正しい高さを取得することが問題を解決する鍵になると思います。

4

2 に答える 2

0

offsetHeightチェックするのが間違っています。これを試して：

$('#threads-list').scroll(function() {
    var el = $(this);
    if (el.height() + el.scrollTop() === this.scrollHeight) {
        alert('do');
    }
});​

scrollHeight現在スクロールによって非表示になっている部分を含む、要素全体の高さです。

フィドル: http://jsfiddle.net/caFwW/

于 2012-11-01T00:42:23.360 に答える
0

やったほうがいい

var container = $('#threads-list'),
    maxScroll = container[0].scrollHeight - container.height(),
    threshold = 10,
    endFlag = false;

container.on('scroll', function(e){
    if ( maxScroll - container.scrollTop() < threshold ){
        if (!endFlag){
            endFlag = true;
            console.log('The END!');
        }
    } else {
        endFlag = false;
    }
});

http://jsfiddle.net/gaby/vXzk3/1/のデモ

最後に何度もやりたいことを避けるためにフラグを使用しました..

于 2012-11-01T00:48:06.470 に答える