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

【问题标题】：How to determine when user scrolls to bottom of container div? For Infinite Scroll如何确定用户何时滚动到容器 div 的底部？对于无限滚动
【发布时间】：2014-01-14 06:27:32
【问题描述】：

我正准备在我们网站的仪表板上开发无限滚动，但是我目前对如何在我的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，使用 jsFiddle 更进一步，使用 $('#scroll_screen').scroll(function(){
注意！当我从#content div 中删除height: 100%，然后向下滚动并返回时，我终于得到了我的警报，但这仍然不正确。警报应该在向下滚动时发生

css

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

【问题讨论】：

$(window).height() - $(window).height() 将始终为 0
啊抱歉，原来是window.scrollTop == document.height - window.height
那个链接上什么都没有，你介意用Fiddle吗，它更可靠，因为我想我知道答案了！（不是发布的内容）
@LeonGaban 我需要看看你的 CSS，我在 body 上看到了类似 100% 的东西，所以我需要看看删除它是否有效。此外，您的 HTML 中有很多错误。
添加了新的注释并刚刚创建了 jsfiddle jsfiddle.net/leonwho/L9A6Q

标签： javascript jquery html infinite-scroll

【解决方案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) 应该可以工作。

【讨论】：

现在使用>=，警报将一直激活，因为该等式的前半部分将始终为真jsfiddle.net/leonwho/L9A6Q 你介意jsfiddle fork 示例吗？
@LeonGaban 这是一个小修复（试试）：if ($('#scroll_screen').scrollTop() >= 200)
我明白了！只需要使用-() 来反转值if ( $('#scroll_screen').scrollTop() >= -($('#content').height() - $('#scroll_screen').height()) ) {
@LeonGaban 很高兴来到这里，但由于if ($('#scroll_screen').scrollTop() >= 200) 也有效，您介意接受我的回答吗；）另外，我添加了您的修复程序。 PS：谢谢，很高兴为您提供帮助
已接受，我发现内容高度存在另一个潜在问题，但我现在有足够的空间继续前进，谢谢！

【解决方案2】：

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

在这种情况下，类似于：

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

【讨论】：