Native Browser Scrollbar Replacement Plugin - scrollbar

Just another custom scrollbar plugin for jQuery plugin that beautifies the native browser scrollbars with your own styles customized in the CSS. Supports both scrollable container and the whole document.

How to use it:

1. Include the necessary jQuery library and jQuery mousewheel plugin on the html page.

<script src="jquery.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>

2. Include the JavaScript library scrollbar.js after jQuery library.

<script src="js/scrollbar.js"></script>  

3. Append the custom scrollbar to the whole body (or a specific container you prefer).

var bodyScrollbar = $('body').scrollbar({
    backClass: 'bodyBackClass',
    frontClass: 'bodyFrontClass',
});  

4. Apply your own CSS styles to the custom scrollbar.

.bodyBackClass {
  width: 6px;
  right: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
}

.bodyFrontClass {
  width: 6px;
  height: 40px;
  left: 0;
  background: #fff;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 20px;
}

5. By default the plugin will automatically scroll to the bottom of the document when content is changed. You can disable the functionality as this:

var bodyScrollbar = $('body').scrollbar({
    autoBottom: false
});  

6. Callback functions.

var bodyScrollbar = $('body').scrollbar({
    moveCallback: function(top, direction) {},
    stopCallback: function(top, direction) {},
});  

---

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