如何确定用户何时滚动到容器 div 的底部？ 对于无限卷轴

Question

我正准备在我们网站的仪表板上开发无限滚动，但是我目前在如何确定我的jsfiddle 模型中容器 div 的底部被困住了。

原始函数，在没有容器 div 的空白页面上工作

var wireInfinScroll = function() {

    console.log('in wireInfinScroll');

    $('#scroll_screen').scroll(function(){

        console.log('scrolling...');
        console.log(' ');

        //if ($('#scroll_screen').scrollTop() == $('#content').height() -     $('#scroll_screen').outerHeight()) {
  
        if ($('#scroll_screen').scrollTop() == $('#content').height() - $('#scroll_screen').height()) {
            // run our call for pagination
            console.log('Bottom of Page!');
            alert('Bottom of Page!');
        }
    });
}

wireInfinScroll();

CSS

#scroll_screen {
  overflow-y: auto;
  background: pink;
}

在我的示例中，我尝试用滚动的 div ( #scroll_screen ) 替换window ，但无法触发警报。

你会如何解决这个问题？

---

更新

• 注意，我在这里使用相同的代码创建了一个新的 jsFiddle： http : //jsfiddle.net/leonwho/L9A6Q/

• 我还注意到，除非我在#scroll_screen div 内单击，否则我的 console.logs 永远不会显示？

• 删除了 Codepen，使用 jsFiddle 更进一步，使用$('#scroll_screen').scroll(function(){

• 注意！ 当我从#content div 中删除height: 100% ，然后向下滚动并向上滚动时，我终于得到了Alert ，但这仍然不正确。 警报应该在向下滚动时发生

css

   #content {
     float: right;
     width: 79%;
     //height: 100%;
     background: #f8f8f8;
   }

Answer 1

$('#scroll_screen').height() - $('#content').height()将给出一个负值，因为scroll_screen的高度总是小于content的高度，这意味着scroll_screen的scrollTop永远不会等于负值，所以替换

$('#scroll_screen').scrollTop() == $('#scroll_screen').height() - $('#content').height()

与

$('#scroll_screen').scrollTop() >=  if ( $('#scroll_screen').scrollTop() >= -($('#content').height() - $('#scroll_screen').height()) ))

（大于或等于以防动画跳过它。）

[编辑] 我注意到它滚动到200 ，所以if ($('#scroll_screen').scrollTop() >= 200)应该可以工作。

Answer 2

您只需要在滚动方法中检查（滚动距离+窗口高度）>=（元素的顶部偏移量+其高度）。

在这种情况下，类似于：

$(window).scroll(function(){
  if( ($(document).scrollTop() + $(window).height()) >= ($('#yourElement').offset().top + $('#yourElement').height()){
    // Bottom of the element reached :)
  }
});