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

Question

我正准备在我们网站的仪表板上开发无限滚动，但是目前我陷入了如何确定 jsfiddle mockup 中容器 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;
}

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

您会如何解决这个问题？

---

更新

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

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

• 删除了 Codepen，使用 $('#scroll_screen').scroll(function(){

  进一步了解了 jsFiddle

• 注意!当我从 #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)应该可以。