Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alternatives to jQuery endless scrolling

Tags:

Are there any alternatives to the jQuery endless scrolling plugin?

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

like image 582
Hussein Avatar asked Jan 30 '11 06:01

Hussein


People also ask

What is infinite scrolling in jQuery?

The jQuery Infinite Scroll feature has become quite common now days. Different websites including Facebook and Twitter are already using it. This feature helps in creating Auto Paging (not link-based paging) in a web page so when a user scrolls down to the bottom, the next page's content are automatically loaded.

What is infinite scroll Javascript?

Infinite scrolling is a feature that allows you to load some pics on a website and then load more once the user reaches the end of the webpage (like we see on Pinterest). We will start off by creating three files, index. html , style. css , and app.

What is infinite Ajax scroll?

Infinite Ajax Scroll empowers web professionals to create powerful interactive paginations. Back-button proof. The browser url is automatically updated when you scroll between pages. Users can reload or bookmark the page and always return to the right place.

What is infinite scroll?

Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. The success of infinite scrolling on social media sites such as Twitter have made this technique popular, but that doesn't mean you should do it too.


2 Answers

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();
});
like image 151
Ergec Avatar answered Oct 09 '22 15:10

Ergec


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).

like image 34
Alf Eaton Avatar answered Oct 09 '22 14:10

Alf Eaton