Infinite Scroll jQuery Plugin « Infinite Scroll | jQuery plugin, Wordpress plugin, interaction design pattern

« Changelog

WordPress Plugin Installation »

Infinite Scroll jQuery Plugin

Note: This documentation is currently out-of-date and will be updated soon. In the mean time, please refer to the GitHub README and Wiki.

This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience.

Download the jQuery plugin

Version 1.5.100504
jquery.infinitescroll.js and minified are now on GitHub

Usage

Minimum required configuration

This is the minimum amount of configuration you can do, if you want things to work:

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
  $('#content').infinitescroll({
 
    navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"          
                   // selector for all items you'll retrieve
  });

All options

// usage:
// $(elem).infinitescroll(options,[callback]);
 
// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
$('#content').infinitescroll({
 
  navSelector  : "div.navigation",            
                 // selector for the paged navigation (it will be hidden)
 
  nextSelector : "div.navigation a:first",    
                 // selector for the NEXT link (to page 2)
 
  itemSelector : "#content div.post",          
                 // selector for all items you'll retrieve
 
  debug        : true,                        
                 // enable debug messaging ( to console.log )
 
  loadingImg   : "/img/loading.gif",          
                 // loading image.
                 // default: "www.infinite-scroll.com/loading.gif"
 
  loadingText  : "Loading new posts...",      
                 // text accompanying loading image
                 // default: "<em>Loading the next set of posts...</em>"
 
  animate      : true,      
                 // boolean, if the page will do an animated scroll when new content loads
                 // default: false
 
  extraScrollPx: 50,      
                 // number of additonal pixels that the page will scroll 
                 // (in addition to the height of the loading div)
                 // animate must be true for this to matter
                 // default: 150
 
  donetext     : "I think we've hit the end, Jim" ,
                 // text displayed when all items have been retrieved
                 // default: "<em>Congratulations, you've reached the end of the internet.</em>"
 
  bufferPx     : 40,
                 // increase this number if you want infscroll to fire quicker
                 // (a high number means a user will not see the loading message)
                 // new in 1.2
                 // default: 40
 
  errorCallback: function(){},
                 // called when a requested page 404's or when there is no more content
                 // new in 1.2                   
 
  localMode    : true
                 // enable an overflow:auto box to have the same functionality
                 // demo: paulirish.com/demo/infscr
                 // instead of watching the entire window scrolling the element this plugin
                 //   was called on will be watched
                 // new in 1.2
                 // default: false
 
    },function(arrayOfNewElems){
 
     // optional callback when new content is successfully loaded in.
 
     // keyword `this` will refer to the new DOM content that was just added.
     // as of 1.5, `this` matches the element you called the plugin on (e.g. #content)
     //                   all the new elements that were found are passed in as an array
 
});

Custom trigger, non-automatic. Twitter-style

In 1.4 you can trigger the loading of the next page of content at will. You’ll first unbind the default behavior. And then trigger the next pull whenever you like..

// unbind normal behavior. needs to occur after normal infinite scroll setup.
$(window).unbind('.infscr');

// call this whenever you want to retrieve the next page of content
// likely this would go in a click handler of some sort
$(document).trigger('retrieve.infscr');

Demo of the triggered infinite scroll functionality.

How does it work?

There is a little known feature in the .load() method that lets you specify the CSS selector of the html you want to include. jQuery will load in any local URL, then parse the html and grab only the elements you’ve defined with your selector. This allows for some pretty fun shit: client-side transclusions (a la purple include) ; and some really kickass shit when you combo it with a local php proxy.

This is really the meat of the code:

// load all post divs from page 2 into an off-DOM div
$('

').load('/page/2/ #content div.post',function(){ 
    $(this).appendTo('#content');    // once they're loaded, append them to our content area
});

So it basically leverages that load() method at its core. It’s basically scraping your existing page structure, which means you don’t need to code any custom backend stuff to enable this functionality! Booyah, right?

This entry was posted on Sunday, June 29th, 2008 at 11:20 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

176 Responses to “Infinite Scroll jQuery Plugin”

« Older Comments

Michael C. says:

October 22, 2011 at 6:00 pm

It seems as though this plugin may have fallen into the abandonware category.

Right out of the gate the instructions were wrong, especially regarding the options for the “Loading…” and “No more…” message strings. I had to dig into the code to find out that the ‘options’ structure and option names have been reworked and are no longer aligned with the docs.

The big problem I’m having right now is that I’m able to keep on scrolling, WAAAAY WAAY past the pagination limit. On my demo page, I have 4 total pages. When I scroll down, new data does indeed load; however, it loads infinitely the more I scroll (i.e.: 4 + INF). How is this plugin supposed to know when to stop loading more pages? Guess I’ll have to dig into the code again. Ugh. Someone experienced, please fork this and pick the project back up off the floor, please.
Jose Gonzalez says:

October 24, 2011 at 12:35 pm

Its funny you complain about it being abandonware and imply that someone in-experienced is working on it since it’s in Paul Irish’s repository on github. Have you thought of opening a github issue?
Paul Irish says:

October 24, 2011 at 1:22 pm

Hey Michael,

The code is looking good right now https://github.com/paulirish/infinite-scroll

Although the docs are lackign. also this site hasnt seen an update in a while. Sorry about that. The team is working on it.
Amy says:

October 25, 2011 at 5:08 pm

I can’t get this to work, I think it’s something to do with my A class, but I’m not sure what to do. help?

content css selector: #blog
post css selector: #blog div.post

navigation links selector: div#nextprev

previouspostsselector: div#nexprev .nextpostslink
(yes next is right using the function class provider by yoast)

What am I doing wrong? I get to the end of my page and it just does nothing. Pretty sure it’s something to do with the A selector, but I can’t work out what?

Cheers for any help!
marsd says:

October 26, 2011 at 4:04 pm

loadingText : “Loading new posts…”,

This does not seem to work at all.
jebediah says:

October 27, 2011 at 11:39 pm

re: loadingText

As noted above the syntax changed for the 2.x versions, it’s best to look at everything in the source at the github repository, but assuming the site dosn’t eat the code, for the loading stuff right now it’s:

$.infinitescroll.defaults = {
loading: {
finished: undefined,
finishedMsg: “Congratulations, you’ve reached the end of the internet.“,
img: “www.infinite-scroll.com/loading.gif”,
msg: null,
msgText: “Loading the next set of posts…“,
selector: null,
speed: ‘fast’,
start: undefined
},
Bostjan says:

October 28, 2011 at 2:55 am

Hi,

I’m wondering if there is a way of having multiple scrolls on one page. My situation is like this:
I have a tab control on one page that switches between different divs. I want those divs to scroll seperately using the infinite scroll plugin. The thing is, that they’re all in the same position of course (because of the tab control). If there is only one scroll it works, but as soon as I put in a new one they conflict and both start loading when I reach the end of the page.

Is there a way to disable scrollers on the hidden divs? Sample of what I’m talking about is here:
vspomin.kreatorij.com/sl/podrobnosti-o-spominu/3/janez/ruzej

Check the “Post mortum” and “Posvetila” tabs.

Thank you for an answer.
luke says:

October 28, 2011 at 8:23 am

Hi all,

I’m working on the documentation today. It’s definitely overdue, and I apologize for the delay.

I wouldn’t classify this as “abandonware”, but please keep in mind that our team is extremely small and we all have a lot going on. Remember, this is an open source project. I can’t speak for Paul or the others, but if there are other people who want to help out with the plugin, documentation, new site, etc., having your help would be very appreciated.
sussegaduss says:

October 28, 2011 at 7:55 pm

Maybe its just me, but i dont think the documentation is clear enough to show how to infinite scrolling when i make different ajax requests each time i reach the end of the page…
all i see is these selectors…

nextSelector : “div.navigation a:first”,

// selector for the NEXT link (to page 2)

but what if i need to make ajax requests??? is there a parameter like this: ???
urlToNextPage: www.vvv.com/?page=1&anotherparameter=3

it would be more straitfoward…

how can i make that works?

someone???
Bostjan says:

October 31, 2011 at 6:33 am

Hi,

is there any chance that someone can take a look at my post from October 28th. I could really use some help on this.

Thank you in advance and I appreciate all the work you put into this plugin.
Bostjan says:

November 1, 2011 at 12:00 pm

After looking around the .js file I noticed a pause method, which seems to be exactly what I need but I can’t figure out what would be the correct way of calling it? Can you help me with that?

Thank you.
15个超酷的JQuery插件 | 睛采 says:

November 12, 2011 at 7:21 am

[...] Demo | Tutorial [...]
Deska Podłogowa says:

November 16, 2011 at 4:32 pm

Deska Podłogowa…

[...]Infinite Scroll jQuery Plugin « Infinite Scroll | jQuery plugin, WordPress plugin, interaction design pattern[...]…
Quang Lee says:

November 17, 2011 at 10:31 am

can anyone help me, please? i can’t make it work. i believe i have problems with the configuration in the wordpress plugin window
this is what i have in my index.php
so i need to know what do i have to write in this fields:

Content CSS Selector:
Post CSS Selector:
Navigation Links CSS Selector:
Previous posts CSS Selector:
THANKS A LOT.

<a class=”" rel=”bookmark”>
<!– by –>

comment_status) : ?>

Not Found
Sorry, but you are looking for something that isn’t here.
Quang Lee says:

November 17, 2011 at 10:33 am

<a class=”" rel=”bookmark”>
<!– by –>

comment_status) : ?>

Not Found
Sorry, but you are looking for something that isn’t here.
Quang Lee says:

November 17, 2011 at 10:36 am

can anyone help me, please? i can’t make it work. i believe i have problems with the configuration in the wordpress plugin window
this is what i have in my index.php
so i need to know what do i have to write in this fields:

Content CSS Selector:
Post CSS Selector:
Navigation Links CSS Selector:
Previous posts CSS Selector:
THANKS A LOT.

<a class=”" rel=”bookmark”>
<!– by –>

comment_status) : ?>

Not Found
Sorry, but you are looking for something that isn’t here.
Adam says:

November 19, 2011 at 10:02 pm

Is there a way to get this to work with a Custom Post Type, not just the “posts” page?
Eugene S. says:

November 20, 2011 at 12:02 am

I’m experiencing very strange situation: I have 3 pages: /page/1, /page/2, /page/3. They have identical structure, only content is different. Each page has Next link.
If I’m starting loading from /page/1 everything works just fine, and I can scroll down to /page/3 with no problem.
But, if I open /page/2 then it just doesn’t work, as if nothing is happening.
Another wired thing: I have different page but with similar structure, which also has Next link. If the Next link is /page/2 it works, and I’m able to scroll. But if the Next link if /page/1 or /page/3 it is not loading.
Any idea how it could be even possible? Any info is appreciated.
Thank you.
max engel says:

November 20, 2011 at 2:58 am

is there a way to control how close to the bottom the refresh occurs? i thought this was bufferPx, but that seems to control how much of the page is loaded, by not how close to the bottom the person is when additional content is loaded. i am implementing it on www.brickd.com.
jaakul says:

November 20, 2011 at 4:19 am

Tried to make it work in plain jQuery with Twitter style custom trigger. Couldn’t figure it out until tried direct url to plugin (www.infinite-scroll.com/wp-content/plugins/infinite-scroll/jquery.infinitescroll.js) instead of downloaded local file and it worked. So apparently there’s something broken in downloadable version?
Choco says:

November 20, 2011 at 7:10 pm

Hello,
Thanks for this plugin…

I’d like to see it in action on my blog but every time I try to save in the admin panel I get a blank page with this message: ‘Are you sure you want to do this?’ with any buttons or options :( So I can’t change settings…

I’m using the Thesis theme on wordpress 3.2.1

Please help!
sathia says:

November 21, 2011 at 8:52 am

for some reason the plugin tries to guess the next URL instead of using the one i feed from the HREF attribute.
is there any way to disable this bug? imo it should be parametrized, with the default set to false.

thanks
sathia says:

November 21, 2011 at 12:25 pm

re: re: loadingText

doesn’t work for me as well, tried both constants
wordpress says:

November 29, 2011 at 1:08 pm

wordpress…

[...]Infinite Scroll jQuery Plugin « Infinite Scroll | jQuery plugin, WordPress plugin, interaction design pattern[...]…
terry says:

December 2, 2011 at 12:49 pm

finishedMsg : “End of the Page”

this option doesn’t work as well
OnlyC says:

December 8, 2011 at 8:48 am

I’ve tried to install it to my asp.net project for 2 days but I can’t :(
My page:
Default.aspx: pastebin.com/ibayfKzK
Default.aspx.cs: pastebin.com/bt1DLuua

Pls help me asap.

« Older Comments