Minimal Custom Scrollbar Plugin with jQuery and jQuery UI - CustemScrollBar

Just another jQuery & jQuery UI component to create a customizable scrollbar within the long content DOM element that will show up on mouse hover.

How to use it:

1. Load the latest version of jQuery library and jQuery UI in your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

2. Load the jQuery CustemScrollBar plugin after jQuery lirbary.

<link rel="stylesheet" type="text/css" href="css/scrollbar.css">

3. The Html structure.

<div class="box">
<div class="container">
<div class="content">

Your content goes here.


</div>
</div>
</div>

4. The required CSS styles.

.box {
position: relative;
display: block;
width: 300px;
height: 280px;
overflow: hidden;
}
.box > .container {
width: 95%;
}
.box > .container > .content {
position: relative;
}
.box > .scroll {
width: 5%;
display: block;
background: black;
position: absolute;
right: 0;
height: 100%;
}
.scroll > .bar {
width: 100%;
position: absolute;
left: 0;
top: 0;
background: gray;
}

5. Call the plugin on the 'box' container.

$(function(){
$(".box").scrollBar();
})

---

This awesome jQuery plugin is developed by EricPing. For more Advanced Usages, please check the demo page or visit the official website.