Highly Customizable and Cross Browser Scrollbar Plugin With jQuery

Highly Customizable and Cross Browser Scrollbar Plugin With jQuery
File Size: 31.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.