Menu
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;
}
715
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);
You're initializing the mCustomScrollbar while the container its in is still hidden, so the browser can't calculate the height of the div. You'll need to either trigger a resize event when the div becomes visible, or do not initialize the scrollbar until it first becomes active on the page.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
