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: "http://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: http://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?

176 Responses to “Infinite Scroll jQuery Plugin”

  1. Walter says:

    Hi Paul! pardon the noobness, but are there any plans on implementing a trigger/nonauto option in the admin panel? I’m having trouble understanding how to get that working with the instructions provided above, and had little luck extracting the solution from the script in the example page. I don’t think I saw anyone mention it but I’d imagine it’s a common request. Either way, thank you for this plugin! It’s working smoothly on my site :)

    Cheers

  2. Craig Thomas says:

    Hi there. Got a slightly odd issue. Infinite scroll for WordPress is installed and all running sweetly as expected… except on an iphone. Fine on iPad. For some reason… on an iPhone it reverts back to WordPress paging nav. But… if you zoom in just a touch… Infinite scroll kicks in. Obviously don’t expect any support – especially for devices that it wasn’t built for – but any pointers would be great.

    Thanks.

  3. Youre so cool! I dont suppose Ive read anything in this way before. So nice to discover somebody with a few original what it really this subject. realy appreciation for starting this up. this url are a few things that is required on line, someone with just a tiny originality. useful work for bringing something new towards internet!

  4. B. says:

    I’m getting the following error:

    Uncaught TypeError: Object http://url.com/?offset=10 has no method ‘join’

    Obviously the “url.com” is a filler to cover up the website URL. But as far as I know I’ve set everything up correctly. I’ve been over everything a dozen times but I can’t figure it out. Please help!

  5. B. says:

    I should add it does say “Loading the next set of posts…” and it gets stuck at this stage.

  6. B. says:

    I stumbled upon some people who also use an offset to determine pages. As some people allready said (here: https://github.com/paulirish/infinite-scroll/issues/5) apparently it’s literally looking for an url that has some sort of number representing the next page (i.e., ‘/page/2/’ or ‘page=2’) as opposed to what I was doing which was the starting item # (like ‘offset=10’). I changed the bahavior of my pages and now it works.

    Although it’s pretty common and most of the time even recommended to use offsets, it still does this. Which is a bit of a shame if you ask me. Would have saved me hours of frustration if it was even documented somewhere.

    Never the less I’m very happy with the result.

  7. Thanks a lot for giving everyone a very wonderful opportunity to check tips from this blog. It is usually so ideal and also stuffed with a good time for me personally and my office fellow workers to search the blog at the least three times every week to learn the newest items you will have. And lastly, I am just at all times happy considering the attractive tactics served by you. Some 3 ideas in this posting are in truth the finest we’ve had.

  8. Marcos says:

    Nice plugin. I got a question: I want to use a JavaScript share button like AddThis or ShareThis, but always in the secong page (on the infinite scroll) this stuff does not work.

    Any solutions for that?

  9. Brad Beebe says:

    I’m noticing the same problem that Craig just described. A small amount of zooming in will trigger the auto-pagination, but not when viewing fully zoomed out.

    Time to dig…

  10. Sebastian says:

    Hello,
    thanks for this great code and your examples.

    Can you please tell me, under which license infinite scroll javascript is?

    Is it under MIT?

    Thanks,

    Sebastian

  11. Paul Irish says:

    sebastian, it’s available under both GPL and MIT. :)

  12. Sebastian says:

    Hi paul,

    Thanks a lot

  13. max engel says:

    i have integrated this successfully onto a test tumblr, http://8bitkid.tumblr.com/. however, i am having a problem where the plugin isn’t correctly recognizing it is at the end of the page. instead of showing the done text and not trying to load any additional pages, if i scroll to the bottom, then back up a bit, it tries to load subsequent pages, and will do this each time i scroll over where the pagination would be.

  14. Albert Atienza says:

    I also integrated this on my project but im having the same error/problem as max engel. Any comment on this issue.

  15. Albert Atienza says:

    Hi max engel i saw your site and also noticed that you’re having the same problem as mine, but how did you get rid of the text “There is no data available.” everytime it reaches the end of list/post. It always show everytime you reach the bottom and then back up a bit resulting to multiple “There is no data available.”. Thanks in advance, i will appreciate your prompt response.

  16. Albert Atienza says:

    By the way I’m using ASP.NET MVC 3 framework for this. Should that be an issue?

  17. Sebastian says:

    Hi.

    I’ve used your plugin on my site for quite some time now, but since version 1.5 or something, the loaded content is no longer wrapped in a div. Is it possible to make it do that again somehow?

    Because right now I have a few problems with some functions that I run when the content has successfully loaded. Seems like they’re interfering with the previous content somehow.

    I have put those functions inside function(arrayOfNewElems){ }, but they seem to run on all the content, not just the newly loaded.

  18. Sebastian says:

    Nevermind, got it working :)
    But it seems like the newest version that’s available at GitHub doesn’t work with jQuery 1.6.1 for me. With 1.5.2 it’s working fine.

  19. jtb says:

    Attention, Drupalnauts! Be sure to add “currPage: 0,” to your options or you’ll skip the first (second) page!

  20. james says:

    I added some code that set display:none on the navSelector before instantiating infinitescroll – after looking through the code i now see why this completely threw off the is-near-bottom conditional meaning loading of new pages got continually triggered incorrectly – might be good to mention this in the docs just to save the time of anyone as foolish as myself?

  21. luke says:

    @james, This is definitely is an issue I’ll put in the new docs, as I discovered it as well a few months ago. If you want to get a similar effect, I’d advise using visibility:hidden. So no-js users can still see the pager, I’d use Modernzr and throw a .no-js { visibility:visible; } in there

  22. Desmond says:

    Thanks for the great plugin! I have an issue with using Jquery events on the content loaded by the infinite scroll. Non eof my jQuery events are working on any of the paged content. Do you have any insight?

  23. Ben McRae says:

    @Desmond, I haven’t used the plugin yet, but your issue sounds like an issue with the DOM. Use ‘.live’ as the event handler instead of ‘.click’ or ‘.bind’ or whatever you currently using. That should help :)

  24. Brendan says:

    I was having a problem getting this working for IE7 until I took away the comma on line 501 after:

    // Unbind from scroll
    unbind: function infscr_unbind() {
    this._binding(‘unbind’);
    }

    Just letting everyone know in case they’re in the same position I was in.

  25. Steven says:

    Hey Paul / gang,

    I’m getting a weird error:

    [“Sorry, we couldn’t parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com.”]

    I’ve set up 2 semi-identical pages (same parent-element and selectors), only difference is that one of these lists has 7 “posts” and loads 5 at a time, and the other has several thousand and loads 20 at a time. The one with 7 posts / 5 at a time throws this temper-tantrum… if i change the amount per-page and the total amount of posts to the 1000+ one, leaving the markup for the other one, the error is remedied weirdly. Is there like a minimum-amount of posts you need to feed it in order to work? What’s also weird is that it also logs the following in console right after throwing in the towel:

    [“determinePath”, “http://[redacted]/deejays/P5”], which is the right URL… Any thoughts?

    Thanks!

    Steven Langbroek
    http://twitter.com/stevenlangbroek

  26. Michał Duda says:

    I think you have small bug in your code that cause javascript exception when scroll ends:

    this.binding(‘unbind’);
    should be
    this._binding(‘unbind’);

    It’s line 242, infscr_error(xhr) function.

  27. Sunny Dsouza says:

    Hey mate, I tried using your plugin in my website.I got it to work after trying hard. However i wanted to knwo the posts that come after clicking on the ‘more’ button do not have any jquery attached to them.

    In other words just go to my site, http://mashup2.sunnydsouza.com and click on ‘more’ button at the bottom, it should fetch 5 posts…this 5 posts dont have the ajax attached to them…try clicking on the vote button or the comment button, you will realize nothing will happen. Do that to any of the above(items at the top) and they behave properly

    Could you provide a solution for the same.

    Looking forward to your help

    regards
    -Sunny

  28. jjpare says:

    I’m using Infinite Scroll in a Tumblr theme, and I’m noticing that it all works just fine if I start on the front page of the blog ( http://jjpare.tumblr.com ), but if you try starting from another page within the site ( http://jjpare.tumblr.com/page/2 for example) then it breaks.
    Anybody got any idea as to why this is?

  29. […] algunos datos de nuestro theme para su correcto funcionamiento.También tenemos a disposición el plugin para jQuery Infinite Scroll que con un mínimo de opciones a configurar nos permite lograr el efecto en cualquier sitio.Pueden […]

  30. Nikol says:

    I’m wondering the same as @jjpare, actually!

  31. oalo says:

    Hey Paul. Great plugin, but some options, such as loadingText and loadingImg are not working. I control + F’ed them in the code and they are not there…

  32. […] Infinite Scroll jQuery Plugin « Infinite Scroll | jQuery plugin, WordPress plugin, interaction desi… (tags: jquery webdesign plugins) GA_googleAddAttr(“AdOpt”, “1”); GA_googleAddAttr(“Origin”, “other”); GA_googleAddAttr(“theme_bg”, “ffffff”); GA_googleAddAttr(“theme_border”, “dddddd”); GA_googleAddAttr(“theme_text”, “333333”); GA_googleAddAttr(“theme_link”, “#1b8be0”); GA_googleAddAttr(“theme_url”, “#1b8be0”); GA_googleAddAttr(“LangId”, “1”); GA_googleAddAttr(“Tag”, “links”); GA_googleFillSlot(“LD_ROS_300-WEB”); Like this:LikeBe the first to like this post. This entry was posted in Links by axelintu. Bookmark the permalink. […]

  33. […] Infinite Scroll Plugin […]

  34. Rowan says:

    Hi, great plugin but the documentation needs a few updates.

    As well as @oalo – I’ve noticed that you’ve restructured the config, particularly for the loading message configuration. In order to configure loading Image and loading text among others – the correct way appears to be to pass them like so:

    $(‘.element’).infinitescroll({
    loading: {
    img: ‘/images/loader.gif’,
    msgText: ‘message here’
    },
    navSelector: “.paginator”,
    nextSelector: “.paginator a.next”,
    itemSelector: “tbody tr”
    });

    loadingImg and loadingText no longer appear to work.

    Cheers!

  35. Benjamin says:

    Hi Paul,

    I’m using your plugin that works really good,

    However I’am not able to use jquery effects on loaded content.
    Should indicate in the callback function the path to the javascript files I need to make work my other jquery? Do you have an example how to make work other jquery plugins with your plugin?

    Thank you very much for your expected answer.

  36. jallen says:

    I’m trying to install this on a NetSuite website, but it appears that the format of the pagination NetSuite provides is different than the formats predicted by this plugin.

    Can you help me figure out how to modify the _determinpath function to account for a format such as “?range=6%2C10%2C11”?

  37. Ryan H says:

    Any way around CAKEPHP pagination that uses /page:2 instead of /page/2

    Thanks

  38. Loris says:

    Hi, I have a problem with your cool plugin.
    I have this code in my html:

    it is a little custom js. this code work on the first page but it can’t fire on the next pages.

    my contents are dynamic: next
    offset is the current page.

    i try to add this js on all pages but it doesn’t work. any ideas?

    thanks

  39. Loris says:

    This is the js:
    and this is the link to next page: next

  40. Krstf says:

    Hi! I read a comment witch is same like my problem: “Nice plugin. I got a question: I want to use a JavaScript share button like AddThis or ShareThis, but always in the secong page (on the infinite scroll) this stuff does not work.”

    My problem is facebook comment. I put a line to index.php witch is not loaded after 2 page. <fb:comments href=”ID)); ?>” num_posts=”10″ width=”600″>

    Any solutions for that? THX!

  41. Niloofar says:

    Hi

    I need to change isDone option of scroll to true, when I click on a button in the page. But, I don’t know how I can call this parameter and change its value from false o true. could someone help me please?

    Thanks in advance

  42. Kurai says:

    Hi,

    is it possible to load data (by array, list or datatable) on my grid instead of “page/2..3..4..”?
    HELP PLEASE….

    Thanks,
    Kurai

  43. Chris Gray says:

    Gday, having trouble with a clients website – your plugin worked beautifully until recently, probably the latest WP update. Is it a known issue, or is this an isolated problem that only I’m experiencing? No error is being thrown up, it’s just not displaying at all, almost as if it’s not installed.

    I’ve disabled, deleted and installed again, but no dice. The site is elparso.com if you want to look.

  44. Great Plugin!
    Thanks mate ;)

  45. Wouter says:

    Great plugin, does exactly what I want.

    However I’m seeing some very strange behavior, my next link is like this: index.php?p=3
    But this will only work when the current page is something like index.php?p=1, index.php?p=0 doesn’t work.

    [“Sorry, we couldn’t pars…at infinite-scroll.com.”
    [“determinePath”, “http://…/index.php?p=1”]

    Is there a way to fix this? I don’t want to redirect users first in order to make it work

  46. elizabeth says:

    […] Infinite Scroll jQuery Plugin « Infinite Scroll | jQuery plugin, WordPress plugin, interaction design pattern […]