If you don’t already know, endless scroll (or infinite scrolling) is a popular technique among web 2.0 sites such as Google Reader and Live Image Search, where instead of paging through items using the traditional pagination technique, the page just keeps loading with new items attached to the end.

I have developed a jQuery plugin to easily achieve this.

Requirement: jQuery 1.2+

The plugin is tested with jQuery 1.2.6, 1.3 and 1.4.

There are a few options to customise the behaviour of this plugin:

bottomPixels (integer) – the number of pixels from the bottom of the page that triggers the event

fireOnce (boolean) – only fire once until the execution of the current event is completed

This entry was posted
on Thursday, January 15th, 2009 at 12:31 pm and is filed under Releases, jQuery.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

I was wondering if this will for for example if i want to have the user jump to a certain row – for example in your Demo, can you give the user the option to load the page from “Added text 260″ – or any number they like?

I’m trying to use this with jQuery tabs and have ran into a problem. I try to define which element should trigger endlesscroll, but it seems that only “document” works. For example, I have several tabs and want a different scroll working for each one of them. Any ideas on how to do this?

How can I keep this from being fired multiple times right in a row? I thought fireDelay set to say, one or two seconds (1000 / 2000 ms) would prevent this but it seems to ignore the fireDelay integer all together. There are times when it will fire back to back very quickly with no delay.

I’ve tried the integer using quotes and no quotes. I’m fetching a set of records and setting the start number based on the amount of articles present. To begin with there are 15 articles, so the first scroll will return the start number of 15. But, if you scroll aggressively it’s possible to fire off two of those calls consecutively.

I had success in modifying the plugin to work with a given scrollable container and a child content element instead of window and document. The default object sets these to window and document but other elements can be set as options when calling endlessscroll().

I was a bit surprised the plugin didn’t already do this. Any reason why not?

I currently use page pagination on my website and love what you have created and offer to share with everyone.

How easy if this to implement when results are taken from a mysql database?

Currently i use a pagination script that shows 10 rows per page but like the idea you have and was wondering if you could give us some clues, advice or example about implementing it with results coming from a db.

In regards to the “Node cannot be inserted at the specified point in the hierarchy” code: “3″ error, which I was also getting with jQuery 1.5.2 – it seemed like the endless plugin was essentially trying to wrap the document itself in a which isn’t allowed (as of jquery 1.5.2 at least). I fixed the issue by putting everything inside the in a .

It seems that using it with combination with jmobile does not work. The 1.3 versions works just on the initial screen, if you follow a link and put it endlessScroll there it doesn’t. Any feedback? Thanks ;)

Thanks for endlessscrolling.! Is there a way to remove the plugin after a partial postback? I am toggling between 2 usercontrols one have the endless scrolling the other a form. when i switch to the form the plugin is still attached to the document and give errors….

Hi, I think that endlessscrolling needs an element with a fixed height to do the magic, is that right? If so my issue is that the DOM element I am adding my data expands vertically as data come in so i could not attach endlessscroll to it…. My issue now is that on the other usercontrol i need to attach endlessscroll to another callback function….. how could i switch the call to another callback function? thanks for the quick reply, it works its magic pretty good

@Manuel, yes the DOM needs to have a fixed height. I don’t quite understand your other question though – do you mean you only want to ‘activate’ endless scroll via a callback from some other events? If it’s a DOM inserted by an AJAX call, you need to use either jQuery’s `live` or `delegate` to attach the endless scroll event to the DOM.

Hi, I have 2 usercontrols, each one is pulling different data from 2 different tables. So I need to switch the callback function to a different one when i toggle between the 2 usercontrols. first user control does
$(document).endlessScroll({
fireOnce: true,
callback: function (p) {
GetPagedPost();
}
});
then second user controls does
$(document).endlessScroll({
fireOnce: true,
callback: function (p) {
GetPagedData();
}
});
each one calls a different callback function. how can i swap or recreate endless scroll with different parameters? thanks

Hi, any ideas on how could i call endless with a given callback function and later when i switch to the other user control call endless with another callback function? My challenge is that it will be attached to $(document)..Any way to call remove() so that i could attach it again?

Hi Fred,
Thanks for the plugin. I am able to use the plugin and get most of my work done. I have a novice question. As of now I am able to get the content loaded using ajax when scrolled in either directions. But, i wish to have the endlessScroll working only when i scroll in the ‘down’ direction. How could i avoid endlessScroll behaviour when scrolled in the ‘up’ direction.

@Fred, Thanks for the response. I am using v1.8.0 so i guess the bug you are referring to should be addressed in v1.8.0. I am not setting ‘pagesToKeep’. I could also notice the same behavior (loading content in ‘up’ direction) with the demo you provided. Anyhow I would try with v1.6.0 and let you know the results. Thanks