trascendency trascendency - 5 months ago 15
Javascript Question

Hidden scrollbar unless page resize

I need a custom scrollbar plugin for a personal project (by "custom" I mean basic inertia effects, custom images and so on). My choice was mCustomScrollbar.

The documentation was indeed very clear, and I haven't had any trouble implementing the script, but it seems to work only when I resize the page, as if scrolling isn't needed.

In fact, the scrollbar has

style="display: hidden"
on a fully loaded page, like in this question (but I couldn't find any useful answers).

I believe there's some
height
issue linked with
slidesjs
(which I'm using as well), but I just can't find it...here's some code:

(There's the whole page, so you can view the code with firebug...just go under "Pulcini" to view the long content)

<head>
<!-- everything is included -->
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="css/jquery.mCustomScrollbar.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.js"></script>
<script>
$(function(){
$("#slides").slides({
generatePagination: false,
pagination: true,
paginationClass: 'pagination'
});
});
</script>
<script>
(function($){
$(window).load(function(){
$("#slide2").mCustomScrollbar();
});
})(jQuery);
</script>
</head>
<body>
<div id="slides">
<!-- other stuff -->
<div class="slides_container">
<div id="slide1">
<h2>Uova</h2>
<p>Text1...</p>
</div>
<!-- slide2 is the scrollbar div -->
<div id="slide2">
<h2>Blabla</h2>
<p>Lorem ipsum</p><br />
</div>
</div>
</div>
</body>


CSS:

div#slides {
height: 506px;
}
.slides_container {
width: 900px;
height: 506px;
}

.slides_container, div#slide1, div#slide2, div#slide3, {
width: 808px;
height: 366px;
display: block;
float: left;
overflow-y: auto;
}

.slides_container {
margin-top: 30px;
margin-bottom: 30px;
height: 366px;
}‚Äč

Answer

I had same problem. So I changed the fluid code for updateOnBrowserResize: true, and updateOnContentResize: true, and now it works great with all the javascript.

(function($) {  
  $(window).load(function() {  
    $("#content_1").mCustomScrollbar({  
      scrollEasing:"easeOutCirc",  
      mouseWheel:"auto",   
      autoDraggerLength:true,   
      advanced:{  
        updateOnBrowserResize:true,   
        updateOnContentResize:true   
      } // removed extra commas  
    });  
  });  
})(jQuery);