Stylish jQuery Custom Scrollbar Plugin - GScroll

GScroll is a simple jQuery plugin that makes an DOM element scrollable and appends a custom scrollbar within it when mouse hover. 

How to use it:

1. Include the jQuery library and jQuery GScroll plugin at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="src/GScroll.js" type="text/javascript"></script>

2. Call the plugin on the Html elements where you want to apply on a custom scrollbar. 

<div id="content">

Your content goes here

</div>

<script type="text/javascript">
$(document).ready(function(){
$('#content').GScroll();
});
</script>

3. By default, the Html container element will be resized to 300x300px. You can custom the size via 'width' and 'height' options in the javascript.

<script type="text/javascript">
$(document).ready(function(){
$('#content').GScroll({
width: "300px",
height: "300px"
});
});
</script>

4. The required CSS to custom the scrollbar.

.GScroll {
position: relative;
overflow: hidden;
}
.GScroll > .GScroll-scrollable {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
}
.GScroll > .GScroll-bar {
position: absolute;
width: 10px;
min-height: 10px;
top: 0px;
right: 0px;
display: none;
background-color: rgba(0,0,0,0.6);
cursor: move;
z-index: 2
}

Change log:

2014-05-03

• Fixed focusin event.

2014-04-17

• Fix method wheel

---

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