mCustomScrollbar

HTML

<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css">
<div id="container1">
    
</div>

<div id="container2">
    
</div>

CSS

#container1,#container2 {
    height:200px;
    width:100px;
    padding:5px;
    border:1px solid black;
}

.mCSB_draggerRail{width:20px;}

JavaScript

/*
 Possible bug?  If you have a selector that matches zero elements and call destroy, all mcustomscrollbars
 are destroyed.
 
 Uncomment the last line and run this fiddle and notice that all scrollbars are destroyed.  I would expected
 no effect.
*/

var container1 = $('#container1');
var container2 = $('#container2');

for (var i = 0; i < 500; i++) {
    container1.append("<p>"+i+"</p>");
}

for (var i = 0; i < 500; i++) {
    container2.append("<p>"+i+"</p>");
}

$('#container1').mCustomScrollbar({ 
        theme:"dark-3"        
});

$('#container2').mCustomScrollbar({ 
        theme:"dark-3"        
});

//$("#selector_that_matches_zero_elements").mCustomScrollbar("destroy");