jQuery Custom Scrollbar Plugin with jQuery UI - acescroll

acescroll is a jQuery UI widget that allows to create custom horizontal or vertical scrollbars as an alternative to the default browser scrollbars in jQuery. It supports for infinite nested elements and can work with mousewheel plugin to provide cross-browser mouse wheel support.

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

How to use it:

1. Include jQuery library, jQuery UI and jQuery acescroll on the page

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jb.acescroll.js"></script>

2. Include mousewheel plugin to provide mouse wheel support (Optional)

<script type="text/javascript" src="jquery-mousewheel/jquery.mousewheel.js"></script>

3. Include required CSS files to style your scrollbars

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="jquery.jb.acescroll.css" />

4. The Html

<div class="content vert">

...

</div>

5. The javascript

$(document).ready(function(){
   $('.vert').acescroll({
   click: function( e, ui ){
   console.log( 'click ', e, ui)
   },
   scroll: function(e, ui ){
   console.log( 'scroll ', e, ui)
   }
   });
});

6. Options available.

animationSpeed: 150,
orientation: 'vertical',
//numeric value in % or false to disable(use css value and is always that width)
minScrollBarWidth: 10,
//hide the scrollbar if the  content is not scrollable, show it if it is
//TODO: make work like css overflow property, none, auto, scroll
autoHide: true,
//in ms how fast we check the target element for scrollChanges like resize or content chagnes
//set to 0 to disable
scrollChangeInterval: 500,
position: {
  my:'left top',
  at:'right top',
  offset:'5 0',
  collision:'none'
}

Change log:

2014-07-30

• update.

2014-05-16

• using the client dim for element size, according to mdm clientH/W will most closely match the the scrollW/H of an element

---

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