title: jQuery tinyscrollbar - not showing all content
body: <p>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: <a href="http://pnsilva.net" rel="nofollow">pnsilva.net</a>).</p>
  
  <p>Here's how I'm creating the scrollbars and loading the content:</p>
  
  <pre><code>$(window).load(function(){
  
      $('#scrollbar1').tinyscrollbar();
      $("#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();
      });
  
  });
  </code></pre>
  
  <p>And here's how the css looks:</p>
  
  <pre><code>#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; }
  </code></pre>
  
  <p>Any ideas why this might be happening?</p>
  
  <p>Thank you</p>