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