Question

有没有jQuery无限滚动插件的替代品？

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

Answer 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();
});

Answer 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是合理的）。

Answer 3

例如infinite scroll plugin

Answer 4

我无法找到一个完全符合我想要的东西，所以我从头开始构建一个。它具有暂停功能，因此在滚动时不会无限加载。有时候有人可能想看页面页脚。它只是附加一个＆＃34; Show More＆＃34;按钮继续追加。我还整合了localStorage，因此当用户点击它时，他们不会在结果中失去位置。

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

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

Answer 5

这里有一个关于如何在没有插件的情况下执行此操作的小指南。 http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

Answer 6

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

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
        }
}

jQuery无休止滚动的替代品

6 个答案:

编辑 2014年1月15日