JScrollPane vanishes when page is refreshed in Chrome

Question

Hi Guys,

I've implemented vertical JScrollPane in to a site i'm designing. it displays correctly in Firefox and IE but in Chrome it displays correctly on page load and when accessing other links that have the scroller on.

However, if I simply refresh the page the scrollbar vanishes.

Any help would be greatly appreciated!

• jScrollPane -v2.0.0beta4
• Jquery - v1.4.2
• chome - v6.0.4

HTML:

<div id = "right_left">
 <div class="Scroller-container">
  ... php foreach displaying list of images ...
 </div>
</div>

CSS:

#right_left{  
  margin-top:10px;
  width:145px;
  padding-left:20px;

}

.Scroller-container{
  width: 100%;
  height:800px;
  overflow:auto;

}

.jspVerticalBar
{
  left: 0;
}

JS+Includes:

<link href="<? echo base_url(); ?>/css/style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;
<script type="text/javascript" src="<? echo base_url(); ?>/scripts/jquery.em.js"></script>
<script type="text/javascript" src="<? echo base_url(); ?>/scripts/jqModal.js"></script>
<link type="text/css" href="scripts/jScrollPane/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="scripts/jScrollPane/script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="scripts/jScrollPane/script/jquery.jscrollpane.min.js"></script>

$(document).ready(function(){

$(function()
{
  $('.Scroller-container').jScrollPane();
});

Answer 1

This was caused by the navigation box containing images that were loading slowly. The scroll bar needed to be reinitialised. I did this by using the following Js, specifically the Autoreinitialise param:

$('.Scroller-container').jScrollPane ({ showArrows:true, autoReinitialise: true });

Answer 2

reinitialiseOnImageLoad:true