jQuery 无限滚动的替代方案答案

【问题标题】：Alternatives to jQuery endless scrollingjQuery 无限滚动的替代方案
【发布时间】：2011-06-18 00:21:31
【问题描述】：

jQuery 无限滚动插件有什么替代品吗？

http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/

【问题讨论】：

【解决方案1】：

这应该在没有插件的情况下做同样的事情

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
      //Add something at the end of the page
   }
});

编辑 2014 年 1 月 15 日

根据@pere 的评论，最好使用下面的代码来避免过多的事件触发。

灵感来自这个答案https://stackoverflow.com/a/13298018/153723

var scrollListener = function () {
    $(window).one("scroll", function () { //unbinds itself every time it fires
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
            //Add something at the end of the page
        }
        setTimeout(scrollListener, 200); //rebinds itself after 200ms
    });
};
$(document).ready(function () {
    scrollListener();
});

【讨论】：

我想链接一个blog post of jQuery's author John Resig 以了解最佳实践。他建议不要在窗口滚动事件中做“太多”事情（比如操作 DOM，或进行 AJAX 调用），因为当用户滚动页面时，该事件会触发多次。
我认为您编辑的版本丢失了重要的滚动事件。如果我快速滚动到页面末尾，它将处理第一个事件（可能只有几个像素）并禁用侦听器。当监听器重新启用时，我可能已经到了页面的末尾。建议的修复：在 scrollListener 中，将 scrollTop 与之前的值进行比较，如果进一步滚动，则立即做出反应。

【解决方案2】：

结合 Ergec 的回答和 Pere 的评论：

function watchScrollPosition(callback, distance, interval) {
    var $window = $(window),
        $document = $(document);

    var checkScrollPosition = function() {
        var top = $document.height() - $window.height() - distance;

        if ($window.scrollTop() >= top) {
            callback();
        }
    };

    setInterval(checkScrollPosition, interval);
}

distance 是触发回调时距屏幕底部的像素数。

interval 是检查运行的频率（以毫秒为单位；250-1000 是合理的）。

【讨论】：

我喜欢你的想法，但它从浏览器中消耗的更多，而不是 Ergec 的想法。即使用户没有滚动并且 Ergec 解决方案在这种情况下也没有运行，它也会运行。我认为最好的解决方案是使用 Ergec 解决方案并在窗口滚动中添加一个 unbind 事件，以防用户滚动到页面末尾。
@RoyShoa 我已经编辑了我的答案。现在是最有效的。
Grate，在我的 idia 上为我 +1 :)

【解决方案3】：

例如infinite scroll plugin

【讨论】：

根据 Paul Irish 的 GitHub 页面，它不再维护。

【解决方案4】：

我找不到完全符合我要求的，所以我从头开始构建了一个。它具有暂停功能，因此在您滚动时不会无休止地加载。有时有人可能想查看页脚。它只是附加一个“显示更多”按钮以继续附加。我还加入了 localStorage，因此当用户点击离开时，他们不会在结果中失去位置。

http://www.hawkee.com/snippet/9445/

它还有一个回调函数，可以调用它来操作新添加的结果。

【讨论】：

【解决方案5】：

这应该解决用户在事件触发之前到达页面底部的错误。我在我的项目中看到了这一点，如果你已经在页面底部，你应该在初始化事件之前检查一下。

var scrollListener = function () {
    executeScrollIfinBounds();
    $(window).one("scroll", function () { //unbinds itself every time it fires
       executeScrollIfinBounds();
        setTimeout(scrollListener, 200); //rebinds itself after 200ms
    });
};
$(document).ready(function () {
    scrollListener();
});

function executeScrollIfinBounds()
{
     if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
            //Add something at the end of the page
        }
}

【讨论】：