jQuery Custom Scrollbar Plugin - malihu
File Size: | 505 KB |
---|---|
Views Total: | 41766 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.