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

122 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

    1. Hey, I just found a solution if anyone here is still looking for one.

      So the div I am using that is scrollable has the class name “tab-scrollable”. Inside that I have a list of objects and a more link to load more content. Then at the top of the page in a scripts block I have the following code.

      var selectedTabId = $(“.tab-pane.panel-body.active”).prop(“id”);
      $(“#” + selectedTabId ).find(“.tab-scrollable”).data(“jscroll”, null);
      $(“#” + selectedTabId ).find(“.tab-scrollable”).jscroll({ nextSelector: ‘a:last’ });

      $(document).ready(function() {
      $(“.tab”).click(function () {
      //this.hash gets the hased href of the Id of the DIV element that also has the class “tab-scrollable”
      $(this.hash).find(“.tab-scrollable”).data(“jscroll”, null);
      $(this.hash).find(“.tab-scrollable”).jscroll({ nextSelector: ‘a:last’ });
      });
      });

      Basically, what this code is doing, is resetting the jscroll for each scrollable element each time a new tab is clicked. I found this worked great for me. So I hope it works well for other people too.

      Ben

  4. Hi Philip,
    I use the jscroll for my project, but when I use the IE9 to test, the scroll page will loading again and again. However it will not stop. If I use the chrome browser then it will be good. Could you give me some advise of why the loading page can not stop. I can pass my code to you if you need.
    Look forward your reply. Thank you.

  5. I had a situation where content can be deleted and cause the bottom of the page to come into view without scroll event firing, which means jScroll was not triggering. If the document became shorter than the window then there would be no way trigger the fetch. I found the spot in jScroll where I could bind another event handler on body.resize, but unfortunately most browsers don’t fire the resize event for anything but the window. I worked around it with custom code to watch the body.height property. I think this would be a great addition to the base jScroll implementation. I tried to paste the code in my reply, but it’s causing your site to fail to save the reply. Email me for the code if you want to see it. Essentially I added 1 array property and 2 methods to jScroll to encapsulate the behavior and then called out to my 2 methods to unbind/re-bind on body.height with a custom watcher in _setBindings right before your scroll unbind/re-bind.

  6. Hi,
    I tried to implement this with wordpress post page but failed. Please someone help me how to do this.

Leave a Reply

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