Highly Customizable and Cross Browser Scrollbar Plugin With jQuery

A jQuery based scrollbar Plugin to create fully CSS customizable and Cross Browser scrollbar which supports all native scroll events.

Features:

• Highly customizable through CSS and javascript
• Supports all major browsers (IE7+, webkit, firefox, etc)
• Auto update scrolls if content changed or resized
• Can be located in any place inside or outside of container

See also:

• jQuery Plugin For Custom Scrollbar - scrollbox
• Tiny jQuery Plugin For Beautifying Scrollbar - perfect-scrollbar
•  jQuery Custom Scrollbar Plugin - malihu
• Responsive Browser Scrollbar Replacement Plugin - ClassyScroll
• Facebook-like jQuery Scrollbar Plugin - slimScroll
• nanoScroller - Mac OS X Lion-Styled Scrollbars
• jQuery Custom Scrollbar Plugin with jQuery UI - acescroll

Basic Usage:

1. Include jQuery library and jQuery Scrollbar Plugin on your web page

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.scrollbar.min.js"></script>

2. Include required CSS file to style your scrollbars

<link type="text/css" href="jquery.scrollbar.css" rel="stylesheet" media="all" />

3. Markup html structure

<div class="scrollbar-inner">

 ... 

</div>

4. Call the plugin

jQuery(document).ready(function(){
    jQuery('.scrollbar-inner').scrollbar();
});

5. Options and defaults.

// automatically calculate scrollsize
"autoScrollSize": true,     

// update scrollbar if content/container size changed
"autoUpdate": true,

// disable body scroll if mouse over container
"disableBodyScroll": false,

// scroll animate duration in ms
"duration": 200,    

// ignore mobile devices
"ignoreMobile": true,

// ignore browsers with overlay scrollbars (mobile, MacOS)
"ignoreOverlay": true,      

// scroll step for scrollbar arrows
"scrollStep": 30,  

// add class to show arrows
"showArrows": false,

// when scrolling to scrollbar mousedown position
"stepScrolling": true,         

// horizontal scroll element
"scrollx": null,    

// vertical scroll element
"scrolly": null,    

// callback functions
"onDestroy": null,  
"onInit": null,     
"onScroll": null,   
"onUpdate": null

Change logs:

2016-08-30

• fix destroy: andSelf => addBack

v0.2.11 (2015-10-22)

• Fix bug with Mozilla FireFox

v0.2.9 (2015-10-22)

• ignore MS Edge browser

v0.2.8 (2015-07-24)

• fix bug with textarea
• fix bug with visible native scrollbar when height:100%

v0.2.5 (2014-11-19)

• fix issue with webkit detection; 
• add option ignoreOverlay;

v0.2.4 (2014-07-15)

• add textarea support

v0.2.2 (2014-04-10)

• added janos scrollbars

v0.2.1 (2014-03-23)

• fix bug with #anchors scroll

v0.2.0 (2014-03-12)

• added onUpdate for page map; scrollbar visibility in css

v0.1.7 (2014-03-07)

• small fixes

v0.1.6 (2014-03-03)

• hack for IE9-11 with 1px diff between visible/scrollable height; 
• remove debug info

 

---

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