javascript - "infinite scroll"代码仅适用于顶部滚动

Question

我正在使用一个“通用”js 片段，它应该检测用户是否滚动到文档底部:

 $(window).scroll(function() {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            //ajax code here
        }
    });

当用户滚动时，新内容应通过 ajax 调用加载。

我本希望当我向下滚动时代码会触发，但当我滚动回页面顶部时，条件实际上会触发，所以它基本上做了与“应该”做的相反的事情。

我已经在许多示例中看​​到过此解决方案，例如: https://stackoverflow.com/a/17078097/1623095

我的调试消息:

console.log($(window).scrollTop());
console.log($(document).height());
console.log($(window).height());

滚动到顶部时的这些输出:

0 
1956 
1956 

底部:

961 
1956
1956 

我的页面中加载的唯一插件是 jquery (1.10.0.min)，由于项目的性质，我无法链接到该页面。

对这里的 dom 行为感到非常困惑。

Answer 1

我之前曾为其他人解决过这个问题。

看看here :

代码

$(window).scroll(function () {
        //- 10 = desired pixel distance from the bottom of the page while scrolling)
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
            var box = $("#scrollbox");
            //Just append some content here
            box.html(box.html() + "<br />fa");
        }
});

Fiddle

只需将您的 ajax 代码放在我用简单的 html 中断扩展内容的位置即可