jQuery Custom Scrollbar Plugin - malihu

malihu is a jQuery plugin that allows you to beautify your content scrollbar with CSS and jQuery UI. It supports vertical or horizontal scrolling, mouse-wheel, scroll easing, adjustable scrollbar height/width, scroll buttons and  etc.

See also:

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

Basic Usage:

1. Include malihu custom scrollbar CSS

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

2. Markup

<div id="content_1" class="content">
<p>...</p>
<p>...</p>
</div>

3. Get Google CDN's jQuery and jQuery UI with fallback to local

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script>!window.jQuery.ui && document.write(unescape('%3Cscript src="jquery/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E'))</script> 

4. Include plugins

<!-- mousewheel plugin --> 
<script src="jquery.mousewheel.min.js"></script> 
<!-- custom scrollbars plugin --> 
<script src="jquery.mCustomScrollbar.js"></script> 

5. Call the plugin

(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);

6. All the default settings.

/*
set element/content width/height programmatically 
values: boolean, pixels, percentage 
  option  	default
  -------------------------------------
  setWidth  false
  setHeight  false
*/
/*
set the initial css top property of content  
values: string (e.g. "-100px", "10%" etc.)
*/
setTop:0,
/*
set the initial css left property of content  
values: string (e.g. "-100px", "10%" etc.)
*/
setLeft:0,
/* 
scrollbar axis (vertical and/or horizontal scrollbars) 
values (string): "y", "x", "yx"
*/
axis:"y",
/*
position of scrollbar relative to content  
values (string): "inside", "outside" ("outside" requires elements with position:relative)
*/
scrollbarPosition:"inside",
/*
scrolling inertia
values: integer (milliseconds)
*/
scrollInertia:950,
/* 
auto-adjust scrollbar dragger length
values: boolean
*/
autoDraggerLength:true,
/*
auto-hide scrollbar when idle 
values: boolean
  option  	default
  -------------------------------------
  autoHideScrollbarfalse
*/
/*
auto-expands scrollbar on mouse-over and dragging
values: boolean
  option  	default
  -------------------------------------
  autoExpandScrollbarfalse
*/
/*
always show scrollbar, even when there's nothing to scroll 
values: integer (0=disable, 1=always show dragger rail, 2=always show dragger rail, dragger and buttons), boolean
*/
alwaysShowScrollbar:0,
/*
scrolling always snaps to a multiple of this number in pixels
values: integer
  option  	default
  -------------------------------------
  snapAmount  null
*/
/*
when snapping, snap with this number in pixels as an offset 
values: integer
*/
snapOffset:0,
/* 
mouse-wheel scrolling
*/
mouseWheel:{
  /* 
  enable mouse-wheel scrolling
  values: boolean
  */
  enable:true,
  /* 
  scrolling amount in pixels
  values: "auto", integer 
  */
  scrollAmount:"auto",
  /* 
  mouse-wheel scrolling axis 
  the default scrolling direction when both vertical and horizontal scrollbars are present 
  values (string): "y", "x" 
  */
  axis:"y",
  /* 
  prevent the default behaviour which automatically scrolls the parent element(s) when end of scrolling is reached 
  values: boolean
  option  	default
  -------------------------------------
  preventDefault  null
  */
  /*
  the reported mouse-wheel delta value. The number of lines (translated to pixels) one wheel notch scrolls.  
  values: "auto", integer 
  "auto" uses the default OS/browser value 
  */
  deltaFactor:"auto",
  /*
  normalize mouse-wheel delta to -1 or 1 (disables mouse-wheel acceleration) 
  values: boolean
  option  	default
  -------------------------------------
  normalizeDelta  null
  */
  /*
  invert mouse-wheel scrolling direction 
  values: boolean
  option  	default
  -------------------------------------
  invert  	null
  */
  /*
  the tags that disable mouse-wheel when cursor is over them
  */
  disableOver:["select","option","keygen","datalist","textarea"]
},
/* 
scrollbar buttons
*/
scrollButtons:{ 
  /*
  enable scrollbar buttons
  values: boolean
  option  	default
  -------------------------------------
  enable  	null
  */
  /*
  scrollbar buttons scrolling type 
  values (string): "stepless", "stepped"
  */
  scrollType:"stepless",
  /*
  scrolling amount in pixels
  values: "auto", integer 
  */
  scrollAmount:"auto"
  /*
  tabindex of the scrollbar buttons
  values: false, integer
  option  	default
  -------------------------------------
  tabindex  null
  */
},
/* 
keyboard scrolling
*/
keyboard:{ 
  /*
  enable scrolling via keyboard
  values: boolean
  */
  enable:true,
  /*
  keyboard scrolling type 
  values (string): "stepless", "stepped"
  */
  scrollType:"stepless",
  /*
  scrolling amount in pixels
  values: "auto", integer 
  */
  scrollAmount:"auto"
},
/*
enable content touch-swipe scrolling 
values: boolean, integer, string (number)
integer values define the axis-specific minimum amount required for scrolling momentum
*/
contentTouchScroll:25,
/*
advanced option parameters
*/
advanced:{
  /*
  auto-expand content horizontally (for "x" or "yx" axis) 
  values: boolean
  option  	default
  -------------------------------------
  autoExpandHorizontalScroll	null
  */
  /*
  auto-scroll to elements with focus
  */
  autoScrollOnFocus:"input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']",
  /*
  auto-update scrollbars on content, element or viewport resize 
  should be true for fluid layouts/elements, adding/removing content dynamically, hiding/showing elements, content with images etc. 
  values: boolean
  */
  updateOnContentResize:true,
  /*
  auto-update scrollbars each time each image inside the element is fully loaded 
  values: boolean
  */
  updateOnImageLoad:true
  /*
  auto-update scrollbars based on the amount and size changes of specific selectors 
  useful when you need to update the scrollbar(s) automatically, each time a type of element is added, removed or changes its size 
  values: boolean, string (e.g. "ul li" will auto-update scrollbars each time list-items inside the element are changed) 
  a value of true (boolean) will auto-update scrollbars each time any element is changed
  option  	default
  -------------------------------------
  updateOnSelectorChange		null
  */
  /*
  extra selectors that'll release scrollbar dragging upon mouseup, pointerup, touchend etc. (e.g. "selector-1, selector-2")
  option  	default
  -------------------------------------
  releaseDraggableSelectors	null
  */
},
/* 
scrollbar theme 
values: string (see CSS/plugin URI for a list of ready-to-use themes)
*/
theme:"light",
/*
user defined callback functions
*/
callbacks:{
  /*
  Available callbacks: 
  callback  default
  -------------------------------------
  onInit  	null
  onScrollStart  null
  onScroll  null
  onTotalScroll  null
  onTotalScrollBacknull
  whileScrolling  null
  onTotalScrollOffset0
  onTotalScrollBackOffset		0
  alwaysTriggerOffsets		true
  onOverflowY  null
  onOverflowX  null
  onOverflowYNone  null
  onOverflowXNone  null
  onImageLoad  null
  onSelectorChangenull
  onUpdate  null
  */
  onTotalScrollOffset:0,
  onTotalScrollBackOffset:0,
  alwaysTriggerOffsets:true
}
/*
add scrollbar(s) on all elements matching the current selector, now and in the future 
values: boolean, string 
string values: "on" (enable), "once" (disable after first invocation), "off" (disable)
liveSelector values: string (selector)
  option  	default
  -------------------------------------
  live  	false
  liveSelector  null
*/

Change Logs:

v3.1.5 (2016-07-11)

• update

v3.1.3 (2015-11-18)

• fixed issue regarding cross-domain iframes

v3.1.0 (2015-10-06)

• fixed for mobile chrome.

v3.0.8 (2015-03-10)

• update

v3.0.7 (2014-12-30)

• update

v3.0.6 (2014-11-29)

• update

v3.0.5 (2014-10-21)

• update

v3.0.4 (2014-09-06)

• update

v3.0.3 (2014-08-01)

• Fixed minor issue with RequireJS in jquery.mCustomScrollbar.concat.min.js and removed version from CSS.

v3.0.3 (2014-07-29)

• update.

v3.0.2 (2014-05-31)

• update.

v3.0.0 (2014-05-22)

• update.
• css bugfix

v2.8.7 (2014-05-19)

• update.

v2.8.6 (2014-05-14)

• update.

v2.8.5 (2014-05-08)

• update.

---

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