Alternatives to jQuery endless scrolling

问题:

Are there any alternatives to the jQuery endless scrolling plugin?

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

回答1:

For example the infinite scroll plugin

回答2:

This should do the same trick without plugin

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

EDIT Jan 15, 2014

According to @pere's comment, it's better to use the code below to avoid excessive amount of event firing.

Inspired from this answer 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();
});

回答3:

Combining Ergec's answer and Pere's comment:

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 is the number of pixels from the bottom of the screen when the callback will fire.

interval is how often the check will run (in milliseconds; 250-1000 is reasonable).

回答4:

I couldn't find one that did exactly what I wanted so I built one from scratch. It has a pause feature so it doesn't keep loading endlessly as you scroll. Sometimes somebody might want to see the page footer. It simply appends a "Show More" button to continue appending. I also incorporated localStorage so when a user clicks away they won't lose their place in the results.

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

It also has a callback function that can be called to manipulate the newly appended results.

回答5:

Here you've a small guide on how to do it without a plugin. http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

回答6:

This should take care of a bug where the user reaches the bottom of the page before the event fires. I was seeing this in my project you should check prior to initializing the event if you're already at the bottom of the page.

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