Dynamic Custom Scrollbar Plugin For jQuery - Scrollable

The Scrollable jQuery plugin replaces the native vertical/horizontal browser scrollbars with highly customizable scrollbars.

Supports auto resizing, nested scrollbars and auto-show on hover. Depends on jQuery, jQuery UI (for draggable) and jQuery mousewheel plugin.

How to use it:

1. Import dependencies into the html page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

2. Load the stylesheet jquery.scrollable.css for the basic styling of the custom scrollbar.

<link href="jquery.scrollable.css" rel="stylesheet">

3. Create a scrollable container on the webpage.

<div class="box">
  Content Here
</div>

.box { 
  height: 300px; 
  width:300px; 
  overflow: auto; 
  padding: 20px;
}

4. Load the JavaScript jquery.scrollable.js right before the closing body tag.

<script src="jquery.scrollable.js"></script>

5. Call the function on the scrollable element and done.

$('.box').scrollable();

6. Enable/disable the mousewheel event in the scrollable element.

$('.box').scrollable({
  mouseWheel: true,
  mouseWheelMaxDelta: 30
});

7. Decide whether to auto hide the scrollbar when the mouse leaves.

$('.box').scrollable({
  autoHide: true
});

8. Perform a custom function when the scrollbar updates.

$('.box').scrollable({
  onUpdate: function(){
    // do something
  }
});

---

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