Minimal Custom Scrollbar Plugin with jQuery and jQuery UI - CustemScrollBar
File Size: | 3.78 KB |
---|---|
Views Total: | 1161 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.