Introducing jScroll

jScroll is a jQuery plugin I have developed for infinite scrolling, lazy loading, or whatever catchy phrase you may know it as. A real-world example of this behavior is your Facebook News Feed, which automatically loads content as you scroll down and reach the end of the page.

I decided to develop this plugin because I did not find any jQuery plugins out there that suited my needs precisely, or any that I could even get to work very well. For more information on jScroll and its use, please visit jscroll.com. There is no extensive documentation at this time, as the plugin is fairly simple and was developed ad hoc. I plan to continue its development and add features, however, over an indefinite period of time.

A real-world example of jScroll infinite scrolling can be seen at Hang3 | Social Classifieds.

Update

As of version 2.0, jScroll now supports full page scrolling and auto paging once you reach the padding threshold from the bottom of the window. Window scrolling versus inside of a div scrolling is detected automatically based on the style properties of the div, i.e. if it is set to overflow “auto” or “scroll.”

Learn more at jscroll.com.
Example use at jscroll.com/#example.
Download the latest version at https://github.com/pklauzinski/jscroll.

Like the Facebook Page for Commit Updates

https://www.facebook.com/jScroll.Infinite.Scrolling

114 comments

  1. Very nice, it is very useful.
    But I have not been able to add more than HTML. Would it be possible to ouput the data as JSON or that would be an extra feature outside the current possibilites?

  2. JScroll is working Done But not Loaded Javascript Function. Mean Javascript is not working in Loaded Content???

  3. Hi Philip,
    I’m trying to implement jscroll on a page with multiple tabs. Each tab must be able to use infinite-scroll individually, and only one tab is visible at any time (the others are set to ‘display: none’). I’m just unable to get this to work.

    The first thing I tried was $(‘.infinitescroll’).jscroll({‘autoTrigger:true’}), but this only causes the last tab in the page to display the desired functionality. When I set ‘autoTrigger’ to false, the ‘next’ links in all the tabs work.

    I also tried to give every tab their own instance (i.e. $(‘.infinitescroll1’).jscroll(), $(‘.infinitescroll2’).jscroll(), etc.) but that gave the same results.

    I tried giving every tab an overflow: auto (to trigger the scroll on element instead of window, not desired but trying everything), but this caused only the first tab to work and immediately loaded all the ‘next’ pages in the div.
    If I gave the tab a height that did not show all the initial items and scrolled within the tab, the autotrigger did work for all the tabs. If I made the height higher than the initial content though, jscroll once again loads all the ‘next’ pages for the first (open) tab and the next tab does not execute the jscroll functionality and no new items are loaded in there.

    I’m kinda out of ideas, and hope you can help.
    Kind regards,

    Vivienne

Leave a Reply

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