Question

所以基本上我的问题看似简单。

你可以在http://furnace.howcode.com看到它的运行情况（请注意，数据是通过Ajax返回的，所以如果没有任何反应，请给它一些时间！）。

当你到达滚动的底部时，在第二列中会发生什么事情，然后返回接下来的5个结果。

但实际发生的是，当你点击滚动区域的TOP时，它只会返回5个结果。试一试：向下滚动，没有任何反应。向后滚动到顶部，返回结果。

出了什么问题？

这是我正在使用的代码：

$('#col2').scroll(function(){
    if ($('#col2').scrollTop() == $('#col2').height() - $('#col2').height()){
       loadMore();
    }
});

loadMore();是获取数据并附加数据的函数。

那么这里出了什么问题？谢谢你的帮助！

Answer 1

以下内容已经过测试，效果很好：

$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadMore();
  }
});

Answer 2

过去这对我有用。

var col = $('#col2');
col.scroll(function(){
   if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
       loadMore(); 
});

这也是一个很好的explanation。

Answer 3

你的数学错误，你的说法是滚动条位置等于列的高度减去列的高度（等于零）加载更多。这就是为什么你的loadMore()被调在你的上方。

尝试：

$('#col2').scroll(function(){
    if ($('#col2').scrollTop() == $('#col2').height()){
       loadMore();
    }
});

Answer 4

我发现了一种有效的替代方案。

这些答案都不适用于我（目前正在使用FireFox 22.0进行测试），经过大量研究后我发现，似乎是一个更清洁，更直接的解决方案。

已实施解决方案：

function IsScrollbarAtBottom() {
    var documentHeight = $(document).height();
    var scrollDifference = $(window).height() + $(window).scrollTop();
    return (documentHeight == scrollDifference);
}

资源： http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html

此致

Answer 5

jordanstephens发布的解决方案正确。但是，你需要的不是＃col2的高度，你需要＃col2的父元素的高度。

示例：

$('#col2').scroll(function(){
  if ($('#col2').scrollTop() == $('#col2').parent().height()) {
    loadMore();
  }
}

Answer 6

以下可能会有效：

HTML - 用另一个DIV包装＃col2里面的内容，比如＃col2-inner
CSS - 仅为＃col2

JS - 请参阅下面的插件：

$.fn.scrollPaging = function (handler) {
    return this.each(function () {
        var $this = $(this),
            $inner = $this.children().first();

        $this.scroll(function (event) {
            var scrollBottom = $this.scrollTop() + $this.height(),
                totalScroll = $inner.height();

            if (scrollBottom >= totalScroll) {
                handler();
            }
        });

    });
};

$('#col2').scrollPaging(loadMore);

Answer 7

@munch是最接近的，但是如果元素上有边框，那么你需要使用.innerHeight（）而不是.outerHeight（），因为后者包含边框而.scrollTop（）不包含（.height（如果你有填充，也会出来）。此外，至少从jQuery 1.7.1开始，也许更早，我建议使用.prop（'scrollHeight'）而不是直接从DOM中检索它。我发现{* 3}}在DOM 5-8上断了DOM scrollHeight，而jQuery函数对我来说是抽象的，至少在IE8上是这样。

var $col = $('#col2');
$col.scroll(function(){
if ($col.innerHeight() == $col.prop('scrollHeight') - $col.scrollTop())
    loadMore(); 
});

Answer 8

我知道这个问题已经解决了，但是在scrollTOp()或$(window).scrollTop()之外的元素上使用jQuery $(document).scrollTop()函数时需要注意的问题，因为某些问题如

jQuery: detecting reaching bottom of scroll doesn't work, only detects the top

Explain why scrollTop() always returns 0 here

$(document).scrollTop() always returns 0

所以你可以使用

$(window).scrollTop() - $('your_selector').offset().top

而不是

$('your_selector').scrollTOp()

避免jQuery scrollTOp()问题。

我的建议如下：

   $(window).scroll(function() {
       var $more = $('#col2');
       var top = $(window).scrollTop() - $more.offset().top;
       if(top + $more.innerHeight() >= $more[0].scrollHeight) {
          loadMore();
       }
   });

jQuery：检测到滚动底部不起作用，只检测顶部

8 个答案: