无限滚动逻辑问题答案

【问题标题】：Inifinite Scroll logic issue无限滚动逻辑问题
【发布时间】：2018-06-22 12:34:40
【问题描述】：

我面临的问题与这个问题完全相同 - Need small logic for infinite scroll jquery

唯一的问题是我无法使用公认的解决方案。解决方案是完美的，但不适用于我的情况。

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        /*Ajax logic*/
    }
});

此逻辑要求用户滚动到页面末尾以满足条件，然后进行调用。这以前可以工作，但现在我不得不通过添加一些比窗口高度大得多的内容来增加页脚。用户不再向下滚动到最后以使此逻辑起作用。

该解决方案添加了一个偏移量，但问题是当用户向上和向下滚动一点（使用上述问题的解决方案）时，他会进行多次不需要的 ajax 调用。

我正在绞尽脑汁，但我想听听你们的意见！谢谢

【问题讨论】：

标签： javascript jquery logic

【解决方案1】：

我自己找到了一个答案，并记下来给有类似问题的其他人。

从逻辑上讲，我为 $(window).scrollTop() 设置了上限，这样它在到达页脚时就不会增加。减去页脚偏移量，并添加了一个相差 1 px 的条件。代码是这样的：

$(window).scroll(function() {
            var scrollpos = $(window).scrollTop();
            var docHgt = $(document).height();
            var wndwHgt = $(window).height();
            var footerH = $("#footer").height();
            /* Capping to a Ceiling */
            if(scrollpos > (docHgt - wndwHgt-footerH))
                scrollpos = (docHgt - wndwHgt-footerH);
            if (( scrollpos >= (docHgt - wndwHgt-footerH))&& (scrollpos <(docHgt - wndwHgt - footerH + 1))) {
            /*Ajax logic*/
            }
});

不是最好的方法，而是一种权衡！

【讨论】：