Simple Slim jQuery Custom Scrollbar Plugin - ekScroll

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.