jquery vertical and horizontal scrollbar

Vertical and horizontal scrollbar

<!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 and horizontal scrollbar - set width and height of a div you want to add a scrollbar to*/
#vertical-horizontal-scrollbar-demo 
{
	width: 400px;
	height: 200px;
}

#vertical-horizontal-scrollbar-demo .overview 
{
	width: 600px;
}
</style>
</head>
<body>

	<h2>Vertical and horizontal scrollbar</h2>

	<!-- Add a skin class to the scrolled div: default-skin in this case -->
	<div id="vertical-horizontal-scrollbar-demo" class="default-skin demo">
		On the Insert tab, the galleries include items that are designed to
		coordinate with the overall look of your document. You can use these
		galleries to insert tables, headers, footers, lists, cover pages, and
		other document building blocks. When you create pictures, charts, or
		diagrams, they also coordinate with your current document look. You
		can easily change the formatting of selected text in the document text
		by choosing a look for the selected text from the Quick Styles gallery
		on the Home tab. You can also format text directly by using the other
		controls on the Home tab. Most controls offer a choice of using the
		look from the current theme or using a format that you specify
		directly. To change the overall look of your document, choose new
		Theme elements on the Page Layout tab. To change the looks available
		in the Quick Style gallery, use the Change Current Quick Style Set
		command. Both the Themes gallery and the Quick Styles gallery provide
		reset commands so that you can always restore the look of your
		document to the original contained in your current template.
	</div>
	<script type="text/javascript">
    $(window).load(function ()
    {
        $(".demo").customScrollbar();
        $("#fixed-thumb-size-demo").customScrollbar({fixedThumbHeight: 50, fixedThumbWidth: 60});
    });
</script>
</body>
</html>

Output :