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

124 comments

  1. Hi. Thanx for a plugin, it’s generally works great. Now I’m encountered a bug, I guess. In my case if the whole page with first loaded portion of content fits the screen without scrolling, the second portion of content is not loading (at least in IE and sometimes in Chrome).
    http://deadcow.ru/rumak/?in_stock=true
    on this page for example, there’s only six pictures shown (it’s points that first portion of content was loaded successfuly on pageLoad) but other content loads only after scrolling (which you can do by minimalizing browser size enough).
    I think this problem appears because of searching/loading of next content portion after previous content loading initializes only by scrolling but there is posibility that next portion must be load immediately.
    Yeah, sorry for my English 🙂

  2. Hi, Do you have a better document on how to use the plugin. This plugin seems to be a perfect fit for my task but I am unable to get , how to implement it? I need little better implementation example with the code. How can is use jscroll with, select component or a scroll-able window. If you have actual code example it would help.

    Thanks

  3. Hi Klauzinski, thanks for your effort to make this pluggin, it’s really useful. But i have something to criticize, and is the lack of documentation. At no time you’re saying how the server response must be (like just text/html, or if can be with json, or just text/plain). When i see the console log when i play with some of your examples, this appears http://prntscr.com/2zqtcf
    When i use in my web, just say this http://prntscr.com/2zqwdp
    I don’t know if i’m doing something wrong, or is just your web.

    The point is that you never say how the code must be in the server side, so i don’t know if the thing i’m doing is the best way, or is just mess.

    Thanks for all, Winderfind.

    1. Winderfind – the server side code is entirely up to you. jScroll is just a front-end tool and plugin for jQuery infinite scrolling. It can pull data from any server side request and in any format you wish.

  4. I ran into a problem with jscroll and thought I’d pass along the solution for anyone else that is having trouble. In my case the jscroll div was actually a jqueryui tab. My tab is filled with dynamic data that may or may not have enough data in it to require a scroll update. What I had to do to get it all working was to modify the _load method and do a check for data.nextHref != ‘undefined’ before the $inner.find line so that if it cannot find the nextHref value, it just destroys the jscroll instance. Then I had to add a line to the _destroy method that removes any outstanding “loading” messages:
    .find(‘.jscroll-inner div.jscroll-loading’).remove()
    added before this line:
    .find(‘.jscroll-inner’).children().unwrap()

    In the docs it says it will destroy the jscroll instance if the nextSelector is not found or doesn’t contain an href attribute. Well that does work after an update but not on initialization which is where I needed it because not every person viewing the tab had enough data in it to merit and update.

    Just thought I’d share that in case anyone needed something similar.

  5. In some cases it might be useful to run the first pass of data loading even if the scrolling check is not triggered. I did that by calling for _load(); in the initialization section but it could be handy to include such option among possible values of autoTrigger variable. Great script by the way, keep up the good work 🙂

  6. I think I found a bug in the _destroy function:

    // Remove the jscroll behavior and data from an element
    function _destroy() {
    return _$scroll.unbind(‘.jscroll’)
    .removeData(‘jscroll’)
    .find(‘.jscroll-inner’).children().unwrap()
    .filter(‘.jscroll-added’).children().unwrap();
    }

    should probably be:
    // Remove the jscroll behavior and data from an element
    function _destroy() {
    _$scroll.unbind(‘.jscroll’);
    return $e.removeData(‘jscroll’)
    .find(‘.jscroll-inner’).children().unwrap()
    .filter(‘.jscroll-added’).children().unwrap();
    }

    since with the first version the data and wrapping stuff is not removed in case _$scroll is window, and not the same as $e.

  7. Hi Frustrated,

    You should make sure that you have declared the nextHref element correctly.

    Hi Philip,

    I am having problem with re initializing jscroll. I am working with pagination with dynamic result content based on set of criteria. When i destroy the first initialization of jscroll and re define a new instance, it doesn’t work as expected. It doesn’t give any error.

    can you help me with this. Thanks.

  8. Hi Philip,

    I figured it out. your destroy method doesn’t remove the attached jscroll data.
    Now its working. 😀

  9. Hi

    I am experiencing the same issue than a persone before… The code just work for one page when it’s autotrigger:true. When it’s autotrigger:false it’s working as expected. Whan I llok th console I can see that is able to find the next Href.
    Do you have already experiencing this before…?

    Thx

  10. Hi! I was wondering if there is an option for this plugin to trigger when scrolling up instead of scrolling down and loading the ajax contents on the top instead of at the bottom.

    Is it possible for this plugin to do it like that?

  11. I have a huge problem.

    Them images what i load has a hover, if its loaded with jscroll the hover stops working. if i add it to the callback, its working, but that way the just the loaded contents hover works, the other breaks.

    Any idea?

  12. I am using jScroll and it functions great. The only issue that I am having is that when I reach the last page of the pagination, it doesn’t hide the pagination links and the ‘previous’ link (‘Prev‘) still appears. I have tried hiding this with jQuery but for some reason it won’t hide. Is there any functionality or way to hide this. Note that the prev link appears on the last loaded page only.

  13. Hi plugin author,

    can you suggest me how can i put delay in autotrigger.?
    because there is issue with images load.
    please suggest,
    vinit

  14. Dear All,

    I have a problem with loading content when I click on next link. It always response with full of html page include tages: , , ..

    To me I just want to load only specific content inside div#scolling in the same page.
    Any idea?

    Thanks,
    Man

  15. Hello i want to “filter” the loaded content setting contentselector to get only what inside “.TextToDisplay”. But it doesnt work… can you tell me where id the error? here it is the testscroll.html code. Thanks, Mirko

    hello

    MY TEXT
    Move NEXT

    $(“.container”).jscroll({
    loadingHtml: “Loading”,
    autoTrigger: false,
    contentSelector: ‘.TextToDisplay’
    });

  16. Seems like a nice plugin, but it has no useful documentation at all…how the response is loaded? there’s no place to pass the function to be called to get the next set of data. How it works? I just can’t wrap my head around it…I was trying trying no luck.

    Atleast it would be nice if you can atleast reply to the comments..

  17. what kind of format i can mention in contentSelector attributes. Is it will apply only class selector or i can do like this contentSelector: “table tbody#check_invoice_table tr:last”. Is it will work?

  18. Ahhh a comment regarding JScroll post 2013 !!! YAY 🙂

    Ok so, I love it. It’s so simple yet perfect for any infinite scroll so firstly, thank you. (Yes, there is a but coming). BUT I can’t get it working on Google Chrome. Firefox & Safari, yes. But Chrome no. All that appears is the anchor tag surrounding the link to the next page. My javascript is embedded below the CSS
    Do you have any advice/suggestions? Thanks!

  19. Great concept. Looks good on your site.
    However, no real example on how to get it to work.
    I’m finding something else. Next time put proper
    examples or you are wasting peoples time. As you
    can see by the comments people like the idea but
    have trouble implementing it due to your lack of documentation
    and proper working examples.

    1. @cat whisperer: If you read the article thorougly, you would have noticed the link to http://jscroll.com, which is where working examples are shown. Also remember, this is FREE software. If you feel your time is being wasted, then go find some paid software with extensive documentation.

      1. Philip, this is amazing.
        And that it is free is even more amazing.

        But I got until now no idea how to load MySQL data and use your jscroll.

        If it is not to much work, can you give me ideas or show me a link for it?

  20. I want to add multiple JScrolls in same page is it possible. I have multiple bootstrap tabs in single page, I want to put multiple JScrolls.

    Please help me out

    1. @Ramakrishna: yes, you can add any number of jScroll instances within the same page. Just add the separate elements to the page with the classname you are using to instantiate jScroll (e.g. .jscroll). If you look at the demo site, jscroll.com, you will see there are actually multiple instances on the same page there.

  21. Thank you Philip for your answer,

    As I seen on Jscroll.com examples all the JScrolls are available on individual div tags. but for my scenario both jscrolls are in tabs side by side and when we scroll main scrollbar for page this content will load.
    I am facing problem like if I start scrolling it automatically loading next tab content also because both are tightened to same main page scroll. I want to resolve this type of situation.

  22. I’ve tried to use the jscroll in Magento but the results are not loading. I checked console in firebug and I can see the response in json instead of the content I had defined. See my call:

    // INFINITY SCROLL
    $(‘div.category-products’).jscroll({
    loadingHtml: ‘Loading…’,
    padding: 0,
    nextSelector: ‘a.next’,
    contentSelector: ‘.products-grid’,
    autoTrigger: true
    });

    And the response in console:

    http://www.evernote.com/shard/s497/sh/05ea0291-3dbf-4e7b-97a7-ebd7ca7cd301/1dbbcf0f19b2dbe69eb1849ee6251eff

    If you have some idea about what could be happening, it would be wonderful, because I have passed more than 1 week trying to get it works, but without success. Thanks!

    1. Hi João. My guess is that Magento detects your request as AJAX and handles those requests by returning JSON as opposed to when the request is a normal page load. You will probably want to look into Magento’s docs and see if there is a parameter you can add to your AJAX requests to prevent them from being returned as JSON.

  23. Hello, and thank you for your plugin. I find it very-most usefull! 🙂

    And I was wondering, how is it that you added the additional page load time?… As you have done it, in the examples on the jscroll.com -website? As I am using currently utilising your plugin for building an example/demo of an Infinite Scrolling website.

    And unfortunately I can’t seem to figure out, exactly where in the Javascript files on your website, that you have added the extra loading time?.. :).
    Hope that you can please help me out? :).

    Oh, and one more thing, while I’m at it 🙂 Any good advice from you, on adding animation to the loading of the new content? As in, an “in”-animation for the newly loaded content 🙂 (And I must embarrassingly admit, that I am not all that great with jQuery… 🙂 )

    Have a great day! And thank you for all of the nice work that you have done! Looking very much forward to hearing form you.

    All the very best to you,
    Jonatan

    1. Hi Jonatan. The additional delay added in the demo is actually on the server side with php, using the sleep() function. It looks like this: < ?php sleep(1); ?>

      If you wanted to achieve this effect on the front-end only, you could use the jScroll callback option, giving it a method that shows your loading animation with a setTimeOut call for a delay, and afterward remove the animation.

  24. Hi ,
    I have use jscroll in my website doest work anything
    Header
    $

    $(document).ready(function(){
    $(‘.scroll’).jscroll({ autoTrigger :true})});

    $
    Any one help me what mistake i doing ?(donest work)

  25. Hi ,
    my webpage doesnot working jscroll
    1. header section i added jquery.jscroll.js, jquery.jscroll.min.js
    then write
    $(document).ready(function(){
    $(‘.scroll’).jscroll({ autoTriggerUntil: 3})});

    2.body section
    div class=’scroll’

    but not working correctly , what mistake im doing ?can you share please

    1. Hi Esakki. You should only include one of the .js files in your page. jquery.jscroll.min.js is simply the minified version of jquery.jscroll.js. Only include one of those, and it should correct your problem.

  26. Trying to get this to work with UL & LI tags, but it keeps adding in there and breaking the masonry setup. Is there a way to get this to work with UL and LI tags?

  27. I meant to say that it keeps adding a DIV in there to load the new content and its breaking up the LI tags

  28. I read it doesn’t work with Masonry … but it does. At first I had problems with it, but when I use

    $(‘.scroll’).masonry({itemSelector: ‘.jscroll-added’});

    it works like a charm for me. Hopefully this post helps someone else out.

  29. Hei!

    Good plugin!

    It works like a charm with multiple html pages content. I can’t seem to make it work with only one page content though.

    How to make it autoload only sections of one page content?

    My example is that data is coming from mysql db through php logic where it get’s converted to json. The data is in one output variable. After that jquery interprets the json data and adds necessary tags. What 2 i need to add to get the jscroll to load only sections? Like after every 5 elements add link and then link or what? Tried that but can’t seem to get it to work. Should the a href=#1, 2 .. be just after the and so on?

    Thanks in advance for advice.

  30. Hei!

    I managed to get it to work with php page.

    I only needed to override “nextSelector” object in jscroll attribute. With default settings it didn’t recognize my php links inside php file. In html file they were fine.

    Links what i used were usual loadmore.php?q=1.
    So i just used [ nextSelector: ‘a.jscroll:last’ ] and put a class name “jscroll” to ‘a’ tags.

    Thanks again for a good plugin.

  31. Hello. Thanks for a useful plugin. Is the following a bug or me not configuring it properly?

    Here’s what’s going on:

    When I reach the last page, I don’t provide a ‘next’ link (because there is no next page). In other words: the nextSelector won’t match anything. I would have expected for jscroll to simply load nothing as a result. Instead it’s loading random garbage, in my case info about printer drivers and what not.

    The solution I’ve found for now is to specify the autoTriggerUntil and set it to the number of pages minus one.

    In addition I had to take into account that I might have followed a link to a page other than 1 and deduct that from the number of auto trigger requests.

    This doesn’t quite seem to make sense to me though, and I’m worried that there will be some special case that I’ve missed.

    Here’s the code (for wordpress):

    1 ) ? get_query_var(‘paged’) – 1 : 0;
    ?>

    $(‘#feed’).jscroll({autoTriggerUntil: max_num_pages – $offset – 1; ?>});

    1. Hi, Simon. It looks like you are using the default nextSelector setting which is a:last. That means jScroll will just use the last link in your content that is loaded every time. You may want to set the nextSelector to something more specific that matches the paging link you are providing. Then when the last page loads and it is not there, jScroll will self destroy.

  32. hey man, your plugin is nice ..but i have some problems with it ..i installed it on my site , it is loading the first page but i dont knoew to how to load next page,,i mean how to load multiple pages…

  33. Many thanks for making this – incredible to see so many whining comments from people not paying for this free plugin when all they need to do is read the documentation properly!

    My problem might not be solved so easily. Everything works fine on Chrome/IE desktop browser but sometimes it doesn’t load the next page swiping to scroll down in Android, and it is necessary to scroll back up a little then down again. Obviously if a user is unaware there is more content they wouldn’t do this and would miss important content. Is there a fix for this or a way to amend the code to make it more foolproof?

    Many thanks

  34. Hi Philip,

    That is really help us for lazy loading. I have below main div (‘BlogPanel lazyload’) and dynamically loaded div is (‘block’) as I shown in below HTML code. This div is populated all content in a one time.PLease check

    Enabling Efficient Production Support Activity
    Title
    Read More

    Test testt stests stetstset
    tsetset stet

    Enabling Efficient Production Support Activity
    Title
    Read More

    Test testt stests stetstset
    tsetset stet

    I have added script on document load

    jQuery(document).ready(function () {

    $(‘.lazyload’).jscroll( {

    debug: true,
    autoTrigger: false,
    autoTriggerUntil: 1,
    pagingSelector : ‘Next’,

    });

    })
    My concern is that I have loaded dynamically without any limitation so it shows all ‘block contents’ at one time.So How can I apply this lazy load effect in above code.

    Could you please assist me on this?

    Thanks,
    Swapnil

  35. Hello all,

    I have One more issue, I dont know you guys faced this kinda issue or Not.

    The jscroll event is fire an ajax on window scroll as well, but it should not fire when I scroll window. It must fire only to the div where I am attaching the event.

    below is my code :

    $(“.infinite-scroll”).jscroll({
    debug: true,
    autoTrigger: true,
    nextSelector: ‘a#NextScroll’,
    callback: function(){
    $(‘.jscroll-inner’).children().unwrap();
    }
    });

    please do help

Leave a Reply

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