Simple Slim jQuery Custom Scrollbar Plugin - ekScroll
File Size: | 13 KB |
---|---|
Views Total: | 2688 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ekScroll is an easy jQuery scroll plugin for creating a slim custom scrollbar for your long content area, featuring auto fade out the overflowed content at the bottom when you scroll down or up.
How to use it:
1. Include the required JQuery library and jQuery UI in the 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. Include the jQuery ekScroll plugin after jQuery library.
<script src="js/ekScrollable.js"></script>
3. Include the jQuery mousewheel plugin for mouse wheel support.
<script src="js/jquery.mousewheel.js"></script>
4. Wrap the content in a container element with a CSS class name.
<div class="demo"> Your content goes here </div>
5. The CSS styles to custom the scrollbar.
.ekScrollable { overflow: hidden; } .ekScrollable .ekScrollableConteneur { overflow: hidden; float: left; } .ekScrollable .ekScrollableConteneur .ekScrollableContenu { padding-bottom: 13.333333333333334px; } .ekScrollable .ekScrollableConteneur .ekScrollableContenu p { margin: 0 0 15px 0; } .ekScrollable .fondScroll { width: 1px; float: right; -moz-border-radius: 3px; border-radius: 3px; background-color: #999999; } .ekScrollable .fondScroll .btnScrollCont { width: 9px; cursor: pointer; } .ekScrollable .fondScroll .btnScrollCont .btnScroll { width: 9px; margin: 0 -4px; background-color: #cccccc; -moz-border-radius: 3px; border-radius: 3px; } .ekScrollable .fondufin { position: relative; } .ekScrollable .fondufin .degrade { height: 40px; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%); }
6. Call the plugin on the container element you just created.
function init(){ $('.demo').ekScrollable(); }
7. Call the plugin on the container element you just created.
function init(){ $('.demo').ekScrollable({ hauteurScrollable:0, hauteurBoutonMin: 20, estScrollable: false, hauteurAffichage:0, initialise:false, degrade:null, enScroll: false, isOn: false, largeurAffichage: 0, hasScrolled:false, multiplicateurMolette:10, premierchargement:false, debug: false, touchActive:false }); }
This awesome jQuery plugin is developed by metaladdict. For more Advanced Usages, please check the demo page or visit the official website.