There are quite a lot of jQuery plugins for scrollbar. I find this jQuery NiceScroll Plugin is quite user friendly so i want to share it to you guys.
1. Download the jQuery NiceScroll Plugin file to your webroot js folder from GitHub or Google Code.
2. Create 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() { $('#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 }); }); </script> <style type="text/css"> #scroll-area { width: 200px; height: 200px; } </style> </head> <body> <div id="scroll-area"> 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. </div> </body> </html>
Done =)
Reference: jQuery NiceScroll Plugin
Fucking hot tips ……………….
LikeLike