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.

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

123 comments

  1. Hi! Your script doesn’t worck correctly at my site. It upload full page with header, footer etc. My code:

    $(‘#dle-content’).jscroll({
    loadingHtml: ‘ Upload…‘,
    autoTrigger: false,
    nextSelector: ‘span#page_navigation1 a:last-child’,
    contentSelector: ‘post-{news-id}’
    });

  2. Sorry for my english, i am from Russia. I need help about your script! It is work, but not correctly.
    When I insert next options:

    $(‘#dle-content’).jscroll({
    loadingHtml: ‘Loading…’,
    autoTrigger: false,
    nextSelector: ‘span#page_navigation1 a:last-child’,
    contentSelector: ‘.item_p’
    });

    it is upload all index.php! Script not found a div with class item_p! Why?

  3. Hello, I don’t know pratically nothing about Java and JQuerry, but i’m trying to set-up from several hurs your plugin in my web page and… i’m not able to do it -.-

    Can I ask for your help?

  4. Hello, I can’t seem to get jscroll to work. I’m using jQuery 1.9 although I also tried linking to v1.6 as in your example, just to make sure there weren’t any compatibility issues. I don’t get any js errors – it simply doesn’t do anything. It just loads the content as separate pages, as if jscroll weren’t there.

    I’d be happy to post or send code if you could possibly help…

  5. Make sure you are initializing jScroll after the document is ready, either right before your closing tag in the document, or anywhere inside a .ready() call, like so:

    $(function() {
    $(‘.scroll’).jscroll();
    });

  6. hi Philip, thanks for plugin, but I have a problem too, it loads text portion and replace with previous one,
    when I set autoTrigger: false and go through all “next” links all is normal, but when autoTrigger is set to true, when I scrolling next portion of data will repace the previous… please help, thanks.

  7. Hi!

    I’m fooling around with JScroll and got stuck on something. I wish to add a .fadeIn() to all the content that gets loaded from, in this case, a blog.

    But how would you recommend me doing that? I’m not a full fledged JS developer… HELP!

    Have a nice day!
    Best regards
    /Johan Svensosn

  8. Hi,
    I want to use jcroll for a project and I have some issues.
    I tried with other scripts, but yours looks much more simple to understand.
    On a WordPress blog page I’m trying to load content using jquery .load() function:

    1
    2

    $(“#s1”).load(“/2013 article.item-list”);
    $(“#s2”).load(“/2013/page/2/ article.item-list”);

    Until here, everything works fine.
    But I can’t make jcroll work. πŸ™
    In your example, you’re using a href=”page.html” to load the new content but in my code I’m not using a href tags.
    I want the content to be loaded first from div id=”s1″ and after I scroll to load the next div, and so on.(like mashable.com)

    Please help. Thanks!

  9. Sorry but i try lot of things and i can’t get jscroll to work… can we have a more detailed example ?

    Best regards.

  10. Hi Philip,
    Is it possible to switch on auto trigger after jscroll is instantiated.

    I am hoping to allow auto trigger for a few rows, and subsequently, the user has to click a button to lazy load.

    And thank you for writing jscroll, it is really useful.

    -Tommi

  11. Hi Phil,
    I really like you tool and I’m using it to redesigning a long page with “infinite scrolling”:

    This is my story
    Content here…
    next page

    $(‘.scroll’).jscroll();

    The script is very easy to use and everything works good, except for the javascript code (AdSense, Facebook stuff) on the ajax-loaded (content.php, in my example above) page. The code is there (I see it with the Chrome debugger) but it is not executed.

    This is definitely an ajax-loading issue, because the script works as expected if I open the page directly in my browser.

    How can I fix this?

    Thanks for your help

  12. Thx for a great plugin!

    It works perfectly, I just have an issue when lazy loading left-floated divs.. It kindof breaks everything and loads new items with every scroll movement, even scrolling up : )

    Do you know of a way to have jscroll work with left-floated divs?

  13. Question: I have a very large result set (up to 28 pages with images) so I’m afraid the DOM will get too large – especially on a smart phone – even crashing the browser.

    Would a “max page” variable be a solution?

    After a set amount of pages the user would then be prompted to click a button until the next max page is reached, etc.

    I think this would be a very good addition to jScroll.

  14. Hello Philip,

    I’m trying to initialize the plugin twice for different divs. It works fine until a point when there is no longer a link to the next set of content for one div. So suppose I have two tables, news and questions, and I have more news than questions. I keep fetching news and questions from the data base and everything works fine for both tables, until there is no more questions to show, but there are still a lot of news and they are not showing on the page. I use different selectors for both divs. Am I not supposed to inititialize it twice on the same page or is it a bug?

  15. Hi,

    Your script works fine just with one exception. Suppose I am loading 12 items in my page and it goes beyond the height of my page then the vertical scrollbar appears and your plugin works.

    But suppose I open the same in a phone say iphone or android which has more height than desktop browsers the page will load but since it can accommodate entire items in the single view the vertical scrollbar doesn’t show up and the plugin fails to load more of the elements.

    Is there any workaround on this problem?

    LoneWOLFs

  16. Hi Philip,

    This is a very nice plugin, i really like it.

    Is there a way to switch from autoTrigger: true to autoTrigger: false after a number of pages loaded?

    Chris

  17. Hi,

    I wanted to ask whether this plugin has been tested in iphone, ipad and ipod? It fails to work in iPhone 5. After loading the initial elements it doesn’t load anymore.

    Is it supported on ‘i’ series?

  18. Hi,

    to solve the contentSelector issue I had to replace lines 42 and 143 with mere data.nextHref = $next.attr(‘href’); otherwise contentSelector is appended twice. I have also added _observe(); after line 47 to trigger infinite scroll on large screens.

    Hope it helps.

  19. Hello… for remove jScroll?
    example
    I have in one php page, this funnction, if click on items, this load() a new form to upadte item, in this case, the function jScroll need removed… is posibile?

  20. The example that you used assumes that the person knows what they are already doing. Would you please provide a better example? For example, in your code it shows Page 1, but the box has “Page 1 of jScroll Example – jQuery Infinite Scrolling Plugin” as the H3. Obviously, your code and the example box DO NOT MATCH. Why don’t you take the effort to make a real example?

  21. Hi Eric,

    That is why the example code says “abbreviated” in the title, because it is an *abbreviated* version of the HTML. Why don’t you take the effort to actually read everything before making comments?

  22. Hey I’m trying to get the jscroll plugin to work. The only part that is confusing me is the “nextSelector”. This seems to be a fairly critical part of what makes it work, but the description of this is remarkably vague. For example, I have lots of links in ALL of the pages that jscroll will load. If it simply will pick the “last link” as it looks like it would do with a:last, then it’ll always think there is another page. Problem is, the description provides zero information on what other options I can type in for “nextSelector” to ensure that it would only pick the actual link I intended to be for the next page. If anyone can provide more info on nextSelector, I would really appreciate it.

  23. Hi, Thanks for the beautiful solution.
    when I implemented this into my project, it does not seems to be working, it is loading whole data at one go, & loading.. is coming at the end of it, please see the code below, & let me know if I am doing any mistake anywhere :

    Ajax method to fetch the data :
    $.ajax({
    type: “POST”,
    url: baseURL + “/Services/DiscussionService.asmx/GetDiscussionHistory”,
    dataType: “json”,
    contentType: “application/json; charset=utf-8”,
    success: function (data) {
    DiscussionWidget.load(data);
    $($(DiscussionWidget).element.find(“.ui-discussion-messages”)).jscroll({ loadingHtml: ‘Loading…’, padding: 20,
    contentSelector: ‘tr’,
    nextSelector: ‘DiscussionWidget.load(data)’
    });
    }
    });

    Div structure :

    Robert Cockburn

    19 Sep 2013

    test

    944697

    Fahim Ahmad Khan

    19 Sep 2013

    Constructing a people picker (a very commonly used control in CIO applications)

    565118

    Is it that table cannot be used for live scrolling?

  24. Awesome script, is there an easy way to modify the script to take a function as an option which should run when new data is loaded.

  25. Hi Philip,
    I’m having a problem with jscroll.Currently I have multiple tabs in a page and I’m using .load() to load the contents of each tab.JSCROLL is working fine until I click a tab and click another tab with out scrolling it gives me this error : TypeError: v is undefined

    I can’t seem to fix it but I’m guessing that jscroll is having a problem because on the first tab jscroll was not destroyed.Is there any function already to destroy jscroll?Thanks.

  26. Pls, can you help me with this simple examle to make it work. What is wrong with it?

    Scroll

    .scroll
    {
    width: 400px;
    height: 150px;
    overflow-y: scroll;
    }

    Page 1 of jScroll Example – jQuery Infinite Scrolling Plugin
    This is the content of page 1 in the jScroll example. Scroll to the bottom of this box to load the next set of content.
    This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.
    With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of “auto” or “scroll,” or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window’s scroll position.
    jScroll is open-source and can be downloaded from my GitHub repository at github.com/pklauzinski/jscroll.

    Page 2
    This is the content of page 2 in the jScroll example. Scroll to the bottom of this box to load the next set of content.
    Fusce et nunc sed nibh eleifend posuere. Integer sodales, elit sit amet porta varius, augue elit consectetur tortor, vitae rhoncus diam ipsum sed quam. Nullam turpis magna, convallis ultrices auctor ut, gravida eu leo. Pellentesque ut risus nibh, in ultrices ante. Suspendisse potenti. Vestibulum dolor sapien, dapibus non fringilla at, fringilla sed ipsum. In adipiscing mi nec risus hendrerit sollicitudin. Nullam eget felis tellus. Quisque dapibus molestie scelerisque. Curabitur sit amet tortor erat, et pretium nisl. Phasellus posuere, nibh vel feugiat sagittis, ligula lorem porttitor sapien, quis aliquam nisl nulla vel nunc.
    Page 3 – Final Page
    This is the content of page 3 in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    Duis vel vestibulum tortor. Curabitur id nulla nec nunc porta blandit quis gravida eros. Proin dictum sagittis velit porta fringilla. Ut ac libero dui. Donec purus leo, semper condimentum porttitor vitae, feugiat vel elit. Etiam ut erat velit. Proin quis tortor lorem. Pellentesque ut lectus ligula. Donec ullamcorper, tellus at fringilla tristique, quam elit luctus felis, ut venenatis quam erat quis lacus. In consequat imperdiet magna posuere vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sodales, nisl eu accumsan molestie, mauris sem luctus sem, at volutpat turpis lorem non massa. Nulla erat turpis, auctor id congue ac, placerat et velit. Donec id ipsum erat, non pellentesque turpis. Nulla facilisi.

    $(‘.scroll’).jscroll();

  27. @Mike I know its a bit late but- I have a large result set also (not as large as yours though, only about 11 or 12 pages) and I was also afraid of the DOM crashing with so much stuff on the page. So, I made it so that each additional page loads with an ID, and I gave the table that holds all of my images on each page a class name of “image-table-{{ ID }}” (I’m using Django btw). Then I created a .js script that uses jquery’s .css method to “display: none;” the table. So basically when page 4 loads, page 1 disappears, page 5 loads page 2 disappears, etc.

  28. HI, I need jscroll functionality for almost 20 pages(based on items).with this jscroll I am not getting that much perfectly..it works normal pagination….I used just the code which given by you..I did’t insert any extra functinalities like ajax….
    If you d’t mine please help me again….

  29. Hi Philip,

    I have a question about JScroll I hope you can help me with.

    Looking at your examples the way to stop JScroll from loading next content is to remove the ‘next selector html’ that contains the url to the next content. In your example 1, page 1-5 have the ‘next selector html’ and page 6 doesn’t.

    In my application I load N-items to the page and programmatically check if I need to include the ‘next selector html’. Let’s say I have 20 items and the first 10 are displayed. This means the ‘next selector html’ is included and JScroll works perfectly to load the next 10 items. After this the ‘next selector html’ is not included anymore and JScroll destroys itself.

    But if I only have a total of 6 items and this is initially loaded without the ‘next selector html’, JScoll keeps showing the ‘Loading’ html after the 6 items, where I should expect JScroll to destroy it self, but it doesn’t.

    In the jquery.jscroll.js JScroll is initialized and calls: _setBindings(), which then calls load() and than keeps showing the Loading html, but shouldn’t it also call _checkNextHref(data) on initialization? Or what is the correct way to stop JScroll in this case?

  30. How easy would it be to modify the plugin to execute an “on click” to fetch the next page instead of using “href”?

  31. Hello! How can i load js-scripts from loading page? I loading page by click on button, page load successfully, but all scripts executed. I read manual of .load(), if i right think – all script will be executed because – contentSelector: ‘.itemContainer’.

    Thx for helping

  32. ok. i try to fix this issue by code another script in head of my site. and it no working on loading content. In head of site:

    jQuery(document).ready(function($) {
    function scroller(){
    $('#itemListLeading').jscroll({
    loadingHtml: ' Loading...',
    padding: 200,
    autoTrigger: false,
    nextSelector: 'a.mylink',
    contentSelector: '.itemContainer'
    });
    }
    scroller();
    });

    $(document).ready(function(){
    $(".catItemView.groupLeading").mouseenter(function(){
    var currentRow = this.id;
    $(this).css('opacity','1');
    $("#" + currentRow + ".col-md-7").addClass('slideInLeft animated');
    $("#" + currentRow + ".col-md-5").addClass('slideInRight animated');
    });
    });

  33. Hi Philip,

    First off. JScroll is a wonderful plugin and has helped resolve a great deal of work in a really short span of time. Kudos for that. However, I am having trouble with the plugin in Internet Explorer 10. The scroll does not seem to stop and repeats the last content loaded again and again. I am basically using jscroll to load more partial views dynamically using an anchor tag at the end of each partial view. In both Chrome and Firefox the plugin works as expected and stops scrolling when there is no more content available. But, this does not happen in IE 10. I tried debugging and came to the conclusion that the partial view is not getting created again, but still somehow IE 10 manages to keep repeating the last loaded partial view infinitely. Please do let me know in case you need any further help in understanding the issue. Thanks in advance.

    -Tinu

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.