jquery - 滚动到底部时的JQuery警报？

Question

有这样的元素：

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

当用户到达按钮（或距离按钮 10px）时，我如何提醒（）？

这就是我现在正在尝试的：

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

似乎问题在于 .offsetHeight 返回与 .height() （均为 200px）相同，后者是容器高度但不是里面的内容，我认为获得内容的正确高度将是解决问题的关键。

Answer 1

offsetHeight是错误的检查。尝试这个：

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

scrollHeight是整个元素的高度，包括当前被滚动隐藏的部分。

小提琴：http: //jsfiddle.net/caFwW/

Answer 2

你应该做

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/

---

我已经使用了一个标志来避免在最后多次做你想做的事情..