jQuery tinyscrollbar - not showing all content

I am having an issue with tinyscrollbar where on the first page load not all content in the viewport is shown (you can have a look at the problem here: pnsilva.net).

Here's how I'm creating the scrollbars and loading the content:

$(window).load(function(){

    $('#scrollbar1').tinyscrollbar();
    $(开发者_JAVA技巧"#scrollbar1 .viewport .overview p").load("/favorites", function() {
        $('#scrollbar1').tinyscrollbar_update();    
    });

    $('#scrollbar2').tinyscrollbar();
    $("#scrollbar2 .viewport .overview p").load("/books", function() {
        $('#scrollbar2').tinyscrollbar_update();
    });

    $('#scrollbar3').tinyscrollbar();
    $("#scrollbar3 .viewport .overview p").load("/music", function() {
        $('#scrollbar3').tinyscrollbar_update();
    });

    $('#scrollbar4').tinyscrollbar();
    $("#scrollbar4 .viewport .overview p").load("/photos", function() {
        $('#scrollbar4').tinyscrollbar_update();
    });

    $('#scrollbar5').tinyscrollbar();
    $("#scrollbar5 .viewport .overview p").load("/code", function() {
        $('#scrollbar5').tinyscrollbar_update();
    });

});

And here's how the css looks:

#scrollbar1 { float:left; width: 20%; height:100%; }
#scrollbar1 .viewport { width:97%; height: 100%; overflow: hidden; }
#scrollbar1 .overview { position: relative; float:left; left: 10px; right:5px; top: 0; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:20px; }
#scrollbar1 .thumb { background-color: #2D8CDA; width:2px; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 2px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:2px; position: relative; }
#scrollbar1 .thumb { height: 20px; width: 2px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .disable{ display: none; }

Any ideas why this might be happening?

Thank you

You should give your images a width and height

I had a similar problem and realize that the problem was that “$(window).load” or “$(document).ready” were firing too soon for the tinyscrollbar. If I manually call “$('#scrollbar').tinyscrollbar_update();” in the console, it shows all the content. To fix this, I set a timer to update the scroll bar some milliseconds after the document ready.

I adapted the code for you (not tested):

$(document).ready(function(){

    $('#scrollbar1').tinyscrollbar();
    $("#scrollbar1 .viewport .overview p").load("/favorites", function() {
        refreshScrollbar($('#scrollbar1'), 10, 250);
    });

    $('#scrollbar2').tinyscrollbar();
    $("#scrollbar2 .viewport .overview p").load("/books", function() {
        refreshScrollbar($('#scrollbar2'), 10, 250);
    });

    $('#scrollbar3').tinyscrollbar();
    $("#scrollbar3 .viewport .overview p").load("/music", function() {
        refreshScrollbar($('#scrollbar3'), 10, 250);
    });

    $('#scrollbar4').tinyscrollbar();
    $("#scrollbar4 .viewport .overview p").load("/photos", function() {
        refreshScrollbar($('#scrollbar4'), 10, 250);
    });

    $('#scrollbar5').tinyscrollbar();
    $("#scrollbar5 .viewport .overview p").load("/code", function() {
        refreshScrollbar($('#scrollbar5'), 10, 250);
    });

});

// To fix scrollbar not showing all content
function refreshScrollbar(scrollbar, counter, delay) {
    if (counter > 0) {
        counter--;
        scrollbar.tinyscrollbar_update('relative');
        setTimeout(function(){
            refreshScrollbar(scrollbar, counter, delay);
        }, delay);
    }
}

I think the problem is that this plugin does not like fluid height viewports (i.e. 100%). You can get around this by setting your viewport's size on page load and then call the plugin.

$(document).ready(function() {
    var viewport_size = $(window).height();
    $('.viewport').css('height',viewport_size);
    $('#scrollbar2').tinyscrollbar();
});

This way the viewport has a set size for the plugin to use. You will also need to set the viewport size again if the window gets re-sized.

As of writing this answer, I believe there are better plugins for your needs. Check out Malihu Custom Scrollbar plugin. This plugin allows you to have fluid scrolling viewports just like you want. It also offers a better array of options and styling.