jQuery NiceScroll Plugin is a very convenient tool for customizing your website scrollbar.
Create a better scrollbar using jQuery NiceScroll Plugin
By default, the scrollbar is hidden if the content doesn’t exceed the content wrapper height. So if you have dynamic content, you have to tell the NiceScroll plugin to resize otherwise the scrollbar doesn’t show.
Let’s start with the following index.html.
<html>
<head>
<title>Eureka! - jQuery NiceScroll Plugin</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="./js/jquery.nicescroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Hide the content
$('#scroll-area span').hide();
// Apply the NiceScroll plugin
$('#scroll-area').niceScroll({
autohidemode: 'false', // Do not hide scrollbar when mouse out
cursorborderradius: '0px', // Scroll cursor radius
background: '#E5E9E7', // The scrollbar rail color
cursorwidth: '10px', // Scroll cursor width
cursorcolor: '#999999' // Scroll cursor color
});
// Implementation of the view more function
$('#view-more').click(function(){
$('#scroll-area span').show();
});
});
</script>
<style type="text/css">
#scroll-area {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="scroll-area">
<a id="view-more" href="#">View more</a>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra facilisis lacus, sed dignissim urna pharetra consectetur. Integer eget imperdiet augue. Mauris nec elit augue, ac condimentum dolor. Proin eget enim et massa dignissim elementum et vitae augue. Morbi adipiscing imperdiet ligula, non porttitor nisi varius nec. Fusce vehicula venenatis faucibus. Nulla tincidunt tristique turpis, sollicitudin semper lectus vehicula lobortis.</span>
</div>
</body>
</html>
The scrollbar will fail in the above example. To fix the problem, you should call the resize() function when the content is updated.
...
// Implementation of the view more function
$('#view-more').click(function(){
$('#scroll-area span').show();
// Trigger the NiceScroll to resize
$('#scroll-area').getNiceScroll().resize();
});
...
If you have no access on the implementation, you can just implement the mouseover function on the content wrapper as a workaround.
...
// Call resize whenever mouse
$("#scroll-area").mouseover(function() {
$("#scroll-area").getNiceScroll().resize();
});
...
Done =)
Reference:
- StackOverflow – Jquery Nice scroll not working
- Create a better scrollbar using jQuery NiceScroll Plugin
Eureka! 
Thanks, Now it is working perfectly for me while loading dynamic contents through Ajax call in a particular Div where Nice-scroll bar works.
LikeLike
Good to know that i could help. =D
LikeLike
Thaaanks!
LikeLike
Thanks, Now it is working perfectly for me.
LikeLike