Create A Fancy Custom Scrollbar with jQuery and CSS3 - Phancy Scroll

Just another jQuery plugin to create a fancy scrollbar that will only appear once you hover over the scrollable area. Fully customizable via CSS and has Right-to-Left language support.

How to use it:

1. Include the latest version of jQuery library and jQuery Phancy Scroll plugin at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="jquery.phancy.js"></script> 

2. Call the plugin on a container element. The plugin will convert the container into a scrollable area with a custom scrollbar.

<script>
$(function() {
$( "#demo" ).customScroll();
});
</script>

3. The CSS to style the scrollbar. Change the styles as you want.

.phancy-scrollbar {
width: 5px;
border-radius: 4px;
top: 0;
position: absolute;
background: #ccc;
-moz-transition: opacity .2s;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
-ms-transition: opacity .2s;
transition: opacity .2s;
-webkit-transition-delay: 1s;
opacity: 0;
}
.phancy-scroller .phancy-scrollbar:active, .phancy-scroller:hover .phancy-scrollbar {
opacity: 1;
-webkit-transition-delay: 0s;
}
.phancy-scrollbarbutton {
width: 100%;
border-radius: 4px;
top: 0;
position: absolute;
background-color: #999;
}

---

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