2012-11-01 53 views
0

具有元素如这样:滚动到底部时JQuery警报?

<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()(均为200像素),这是容器的高度而不是内容在内部,我认为获得内容的正确高度将是解决问题的关键。

回答

0

offsetHeight是错误的检查。试试这个:

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

scrollHeight是整个元素的高度,包括目前通过滚动隐藏的部分。

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

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/


我使用了一个标志,以避免做你想要什么,在年底多次..