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 :
