Content load on Scroll with jQuery

To produce a similar effect as twitter (although for an entirely different purpose) I created a little bit of script to load additional content to ht end of the document when you scroll to the bottom. This will create the effect of the page being as long as your total content, no page switching, no linking to to other pages, just one long page.

This version uses jQuery because the site I’m making uses jQuery for a bunch of other things, I do have a complete non-jQuery version if anybody is interested. Anyways, heres the code

Snipplr: http://snipplr.com/view/47744/simple-content-load-on-scroll/

The scripts pretty straight forward, only things to note are that the current top display number is stores in a hidden input, the reason I have it set up this way is because if the user doesn’t have jquery, of the script fails to load for some reason, I’ll still know where the are so a traditional next page button will pick up where they left off. There’s also a minor bug on my phone when testing, I’ll look into it and post a fix if I find one, shouldn’t be to hard to fix with some polling (check position every x milliseconds), which, coincidentally is how the non-jQuery version works.

Example can be seen right here: http://fatfolderdesign.com/ex/scroll_load/, it’s as basic as basic can be.

Edit 07/15/2011: Having a problem getting this to work properly in Firefox? So did commenter Mihajlo, he also supplied a fix before I even had a chance to take a look. I talk a little in a new post, aptly names Content load on scroll with jQuery UPDATE but for the short version is add this bit of code, just add it or integrate it into existing code:

Snipplr: http://snipplr.com/view/47744/simple-content-load-on-scroll/

I’ve updated the snipplr post and example page accordingly. Thanks Mihajlo.

16 Replies to “Content load on Scroll with jQuery”

  1. Woah! I’m really loving the template/theme of this site. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between user friendliness and appearance. I must say that you’ve done a awesome job with this. Additionally, the blog loads extremely fast for me on Chrome. Superb Blog!

  2. this example is not working in firefox – 3.6.18 and 5.0 both windows and linux version.

    Open http://fatfolderdesign.com/ex/scroll_load/
    scroll down ajax to load 4-5 times, scroll back up, refresh the page and scroll down again, after 50th line it will continue with line 400.

    Seems like firefox is remembering last loaded id after the page is reloaded.

    When I refresh page with ctrl+shift+f5 then it works properly.
    Is there a workaround for this?

    1. You caught me at work, I didn’t have a chance to reply at the time, glad to see you got it sorted out. I’ll make a proper post (as well as modify this one) with your fix. Thanks for posting it.

    1. As it currently works, no. Loading a single large document like this wouldn’t be very beneficial anyways a the best part of this is to keep the initial page load as quick as possible. This could however easily be modified to load multiple smaller html files. That would give you the advantage of the ajax file load and the same effect without any need for php our another server side script.

  3. Hi,

    I took your example page and copied the source code and added an absolute path to the jquery.js file but the page only goes to the 49th line. Am I doing something wrong?

    1. Sorry for the late reply, if you want to put the code up on JS Fiddle or something I can take a look and see what might be the problem.

Leave a Reply

Your email address will not be published. Required fields are marked *