Wednesday, September 18, 2013

jquery-nicescroll

Today I needed a customized scrollbar for a web application I'm building. I needed something really simple and easy to use and configure, so I gave jquery-nicescroll a try.

You can dowload the latest version from GitHub:
https://github.com/inuyaksa/jquery.nicescroll

Using it is really simple, I set it up like this:

 <script type="text/javascript">  
      nicescrollsettings = {  
           touchbehavior:false,  
           cursorcolor:"#1b1b1b",  
           cursoropacitymax:0.7,  
           cursorwidth:2,  
           cursorborder:"1px solid #353535",  
           cursorborderradius:"0px",  
           background:"#404040",  
           autohidemode:"false"  
      }  
      $(".nicescroll").niceScroll(nicescrollsettings);  
 </script>  

Of course you need jquery and jquery-nicescroll in the header:

 <script type="text/javascript" src="js/jquery.min.js"></script>  
 <script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>  

This basically puts a styled scrollbar on all elements that have the nicescroll class.

My only problem was that I had multiple containers in need of styled scrollbars and all except one was hidden in a tabbed interface. Upon switching to an other tab, the currently visible element's scrollbar started glitching.

The solution was to use getNiceScroll().resize() to reactivate the scrollbar. Cicking on my third tab needed this for example:

 $('#left-tab-3-content-list').getNiceScroll().resize();