Vertical Scroll Bar
<!DOCTYPE html> <html> <head> <title>JQuery Custom Scrollbar - basic usage demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="jquery.custom-scrollbar.js"></script> <link type="text/css" rel="stylesheet" href="jquery.custom-scrollbar.css" /> <style type="text/css"> /*Vertical scrollbar - set width and height of a div you want to add a scrollbar to*/ #vertical-scrollbar-demo { height: 100px; width: 400px; } </style> </head> <body> <h1>JQuery Custom Scrollbar - basic usage</h1> <h2>Vertical scrollbar</h2> <!-- Add a skin class to the scrolled div: gray-skin in this case --> <div id="vertical-scrollbar-demo" class="gray-skin demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </div> <script type="text/javascript"> $(window).load(function () { $(".demo").customScrollbar(); $("#fixed-thumb-size-demo").customScrollbar({fixedThumbHeight: 50, fixedThumbWidth: 60}); }); </script> </body> </html>
Output :
All of these work samples are taken from jquery plugins
and you need three files :
1) http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
2) jquery.custom-scrollbar.js
3) jquery.custom-scrollbar.css