jQuery custom content scroller
Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more.
Current version 3.1.5 (Changelog)
Upgrading from version 2
How to use it
Get started by downloading the archive which contains the plugin files (and a large amount of HTML demos and examples). Extract and upload jquery.mCustomScrollbar.concat.min.js, jquery.mCustomScrollbar.css and mCSB_buttons.png to your web server (alternatively you can load plugin files from a CDN).
HTML
Include jquery.mCustomScrollbar.css in the head tag your HTML document (more info)
<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
Include jQuery library (if your project doesn’t use it already) and jquery.mCustomScrollbar.concat.min.js in the head tag or at the very bottom of your document, just before the closing body tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>
CSS
The element(s) you want to add scrollbar(s) should have the typical CSS properties of an overflowed block which are a height (or max-height) value, an overflow value of auto (or hidden) and content long enough to require scrolling. For horizontal scrollbar, the element should have a width (or max-width) value set.
If you prefer to set your element’s height/width via javascript, you can use the setHeight
/setWidth
option parameters.
Initialization
Initialize via javascript
After files inclusion, call mCustomScrollbar function on the element selector you want to add the scrollbar(s)
<script> (function($){ $(window).on("load",function(){ $(".content").mCustomScrollbar(); }); })(jQuery); </script>
Initialize via HTML
Add the class mCustomScrollbar
to any element you want to add custom scrollbar(s) with default options. Optionally, set its axis via the HTML data attribute data-mcs-axis
(e.g. "x"
for horizontal and "y"
for vertical) and its theme via data-mcs-theme
. For example:
<div class="mCustomScrollbar" data-mcs-theme="dark"> <!-- your content --> </div>
Basic configuration & option parameters
axis
By default, the script applies a vertical scrollbar. To add a horizontal or 2-axis scrollbars, invoke mCustomScrollbar function with the axis option set to "x"
or "yx"
respectively
$(".content").mCustomScrollbar({ axis:"x" // horizontal scrollbar });
$(".content").mCustomScrollbar({ axis:"yx" // vertical and horizontal scrollbar });
theme
To quickly change the appearance of the scrollbar, set the theme option parameter to any of the ready-to-use themes available in jquery.mCustomScrollbar.css, for example:
$(".content").mCustomScrollbar({ theme:"dark" });
Configuration
You can configure your scrollbar(s) using the following option parameters on mCustomScrollbar function
Usage $(selector).mCustomScrollbar({ option: value });
setWidth: false
- Set the width of your content (overwrites CSS width), value in pixels (integer) or percentage (string).
setHeight: false
- Set the height of your content (overwrites CSS height), value in pixels (integer) or percentage (string).
setTop: 0
- Set the initial css top property of content, accepts string values (css top position).
Example:setTop: "-100px"
.
setLeft: 0
- Set the initial css left property of content, accepts string values (css left position).
Example:setLeft: "-100px"
.
axis: "string"
- Define content’s scrolling axis (the type of scrollbars added to the element: vertical and/of horizontal).
Available values:"y"
,"x"
,"yx"
.axis: "y"
– vertical scrollbar (default)axis: "x"
– horizontal scrollbaraxis: "yx"
– vertical and horizontal scrollbars
scrollbarPosition: "string"
- Set the position of scrollbar in relation to content.
Available values:"inside"
,"outside"
.
SettingscrollbarPosition: "inside"
(default) makes scrollbar appear inside the element. SettingscrollbarPosition: "outside"
makes scrollbar appear outside the element. Note that setting the value to"outside"
requires your element (or parent elements) to have CSSposition: relative
(otherwise the scrollbar will be positioned in relation to document’s root element).
scrollInertia: integer
- Set the amount of scrolling momentum as animation duration in milliseconds.
Higher value equals greater scrolling momentum which translates to smoother/more progressive animation. Set to0
to disable.
autoDraggerLength: boolean
- Enable or disable auto-adjusting scrollbar dragger length in relation to scrolling amount (same bahavior with browser’s native scrollbar).
SetautoDraggerLength: false
when you want your scrollbar to (always) have a fixed size.
autoHideScrollbar: boolean
- Enable or disable auto-hiding the scrollbar when inactive.
SettingautoHideScrollbar: true
will hide the scrollbar(s) when scrolling is idle and/or cursor is out of the scrolling area.
Please note that some special themes like “minimal” overwrite this option.
autoExpandScrollbar: boolean
- Enable or disable auto-expanding the scrollbar when cursor is over or dragging the scrollbar.
alwaysShowScrollbar: integer
- Always keep scrollbar(s) visible, even when there’s nothing to scroll.
alwaysShowScrollbar: 0
– disable (default)alwaysShowScrollbar: 1
– keep dragger rail visiblealwaysShowScrollbar: 2
– keep all scrollbar components (dragger, rail, buttons etc.) visible
snapAmount: integer
- Make scrolling snap to a multiple of a fixed number of pixels. Useful in cases like scrolling tabular data, image thumbnails or slides and you need to prevent scrolling from stopping half-way your elements. Note that your elements must be of equal width or height in order for this to work properly.
To set different values for vertical and horizontal scrolling, use an array:[y,x]
snapOffset: integer
- Set an offset (in pixels) for the snapAmount option. Useful when for example you need to offset the snap amount of table rows by the table header.
mouseWheel:{ enable: boolean }
- Enable or disable content scrolling via mouse-wheel.
mouseWheel:{ scrollAmount: integer }
- Set the mouse-wheel scrolling amount (in pixels). The default value
"auto"
adjusts scrolling amount according to scrollable content length.
mouseWheel:{ axis: "string" }
- Define the mouse-wheel scrolling axis when both vertical and horizontal scrollbars are present.
Setaxis: "y"
(default) for vertical oraxis: "x"
for horizontal scrolling.
mouseWheel:{ preventDefault: boolean }
- Prevent the default behaviour which automatically scrolls the parent element when end or beginning of scrolling is reached (same bahavior with browser’s native scrollbar).
mouseWheel:{ deltaFactor: integer }
- Set the number of pixels one wheel notch scrolls. The default value “auto” uses the OS/browser value.
mouseWheel:{ normalizeDelta: boolean }
- Enable or disable mouse-wheel (delta) acceleration. Setting
normalizeDelta: true
translates mouse-wheel delta value to -1 or 1.
mouseWheel:{ invert: boolean }
- Invert mouse-wheel scrolling direction. Set to
true
to scroll down or right when mouse-wheel is turned upwards.
mouseWheel:{ disableOver: [array] }
- Set the tags that disable mouse-wheel when cursor is over them.
Default value:["select","option","keygen","datalist","textarea"]
scrollButtons:{ enable: boolean }
- Enable or disable scrollbar buttons.
scrollButtons:{ scrollAmount: integer }
- Set the buttons scrolling amount (in pixels). The default value
"auto"
adjusts scrolling amount according to scrollable content length.
scrollButtons:{ scrollType: "string" }
- Define the buttons scrolling type/behavior.
scrollType: "stepless"
– continuously scroll content while pressing the button (default)scrollType: "stepped"
– each button click scrolls content by a certain amount (defined in scrollAmount option above)
scrollButtons:{ tabindex: integer }
- Set a tabindex value for the buttons.
keyboard:{ enable: boolean }
- Enable or disable content scrolling via the keyboard.
The plugin supports the directional arrows (top, left, right and down), page-up (PgUp), page-down (PgDn), Home and End keys.
keyboard:{ scrollAmount: integer }
- Set the keyboard arrows scrolling amount (in pixels). The default value
"auto"
adjusts scrolling amount according to scrollable content length.
keyboard:{ scrollType: "string" }
- Define the keyboard arrows scrolling type/behavior.
scrollType: "stepless"
– continuously scroll content while pressing the arrow key (default)scrollType: "stepped"
– each key release scrolls content by a certain amount (defined in scrollAmount option above)
contentTouchScroll: integer
- Enable or disable content touch-swipe scrolling for touch-enabled devices.
To completely disable, setcontentTouchScroll: false
.
Integer values define the axis-specific minimum amount required for scrolling momentum (default:25
).
documentTouchScroll: boolean
- Enable or disable document touch-swipe scrolling for touch-enabled devices.
advanced:{ autoExpandHorizontalScroll: boolean }
- Auto-expand content horizontally (for
"x"
or"yx"
axis).
If set totrue
, content will expand horizontally to accommodate any floated/inline-block elements.
Setting its value to2
(integer) forces the non scrollHeight/scrollWidth method. A value of3
forces the scrollHeight/scrollWidth method.
advanced:{ autoScrollOnFocus: "string" }
- Set the list of elements/selectors that will auto-scroll content to their position when focused.
For example, when pressing TAB key to focus input fields, if the field is out of the viewable area the content will scroll to its top/left position (same bahavior with browser’s native scrollbar).
To completely disable this functionality, setautoScrollOnFocus: false
.
Default:"input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']"
advanced:{ updateOnContentResize: boolean }
- Update scrollbar(s) automatically on content, element or viewport resize.
The value should betrue
(default) for fluid layouts/elements, adding/removing content dynamically, hiding/showing elements etc.
advanced:{ updateOnImageLoad: boolean }
- Update scrollbar(s) automatically each time an image inside the element is fully loaded.
Default value isauto
which triggers the function only on"x"
and"yx"
axis (if needed).
The value should betrue
when your content contains images and you need the function to trigger on any axis.
advanced:{ updateOnSelectorChange: "string" }
- Update scrollbar(s) automatically when the amount and size of specific selectors changes.
Useful when you need to update the scrollbar(s) automatically, each time a type of element is added, removed or changes its size.
For example, settingupdateOnSelectorChange: "ul li"
will update scrollbars each time list-items inside the element are changed.
Setting the value totrue
, will update scrollbars each time any element is changed.
To disable (default) set tofalse
.
advanced:{ extraDraggableSelectors: "string" }
- Add extra selector(s) that’ll release scrollbar dragging upon mouseup, pointerup, touchend etc.
Example:extraDraggableSelectors: ".myClass, #myID"
advanced:{ releaseDraggableSelectors: "string" }
- Add extra selector(s) that’ll allow scrollbar dragging upon mousemove/up, pointermove/up, touchend etc.
Example:releaseDraggableSelectors: ".myClass, #myID"
advanced:{ autoUpdateTimeout: integer }
- Set the auto-update timeout in milliseconds.
Default timeout:60
theme: "string"
- Set the scrollbar theme.
View all ready-to-use themes
All themes are contained in plugin’s CSS file (jquery.mCustomScrollbar.css).
Default theme:"light"
callbacks:{ onCreate: function(){} }
- A function to call when plugin markup is created.
Example:
callbacks:{ onCreate:function(){ console.log("Plugin markup generated"); } }
callbacks:{ onInit: function(){} }
- A function to call when scrollbars have initialized (demo).
Example:
callbacks:{ onInit:function(){ console.log("Scrollbars initialized"); } }
callbacks:{ onScrollStart: function(){} }
- A function to call when scrolling starts (demo).
Example:
callbacks:{ onScrollStart:function(){ console.log("Scrolling started..."); } }
callbacks:{ onScroll: function(){} }
- A function to call when scrolling is completed (demo).
Example:
callbacks:{ onScroll:function(){ console.log("Content scrolled..."); } }
callbacks:{ whileScrolling: function(){} }
- A function to call while scrolling is active (demo).
Example:
callbacks:{ whileScrolling:function(){ console.log("Scrolling..."); } }
callbacks:{ onTotalScroll: function(){} }
- A function to call when scrolling is completed and content is scrolled all the way to the end (bottom/right) (demo).
Example:
callbacks:{ onTotalScroll:function(){ console.log("Scrolled to end of content."); } }
callbacks:{ onTotalScrollBack: function(){} }
- A function to call when scrolling is completed and content is scrolled back to the beginning (top/left) (demo).
Example:
callbacks:{ onTotalScrollBack:function(){ console.log("Scrolled back to the beginning of content."); } }
callbacks:{ onTotalScrollOffset: integer }
- Set an offset for the onTotalScroll option.
For example, settingonTotalScrollOffset: 100
will trigger the onTotalScroll callback 100 pixels before the end of scrolling is reached.
callbacks:{ onTotalScrollBackOffset: integer }
- Set an offset for the onTotalScrollBack option.
For example, settingonTotalScrollBackOffset: 100
will trigger the onTotalScrollBack callback 100 pixels before the beginning of scrolling is reached.
callbacks:{ alwaysTriggerOffsets: boolean }
- Set the behavior of calling onTotalScroll and onTotalScrollBack offsets.
By default, callback offsets will trigger repeatedly while content is scrolling within the offsets.
SetalwaysTriggerOffsets: false
when you need to trigger onTotalScroll and onTotalScrollBack callbacks once, each time scroll end or beginning is reached.
callbacks:{ onOverflowY: function(){} }
- A function to call when content becomes long enough and vertical scrollbar is added.
Example:
callbacks:{ onOverflowY:function(){ console.log("Vertical scrolling required"); } }
callbacks:{ onOverflowX: function(){} }
- A function to call when content becomes wide enough and horizontal scrollbar is added.
Example:
callbacks:{ onOverflowX:function(){ console.log("Horizontal scrolling required"); } }
callbacks:{ onOverflowYNone: function(){} }
- A function to call when content becomes short enough and vertical scrollbar is removed.
Example:
callbacks:{ onOverflowYNone:function(){ console.log("Vertical scrolling is not required"); } }
callbacks:{ onOverflowXNone: function(){} }
- A function to call when content becomes narrow enough and horizontal scrollbar is removed.
Example:
callbacks:{ onOverflowXNone:function(){ console.log("Horizontal scrolling is not required"); } }
callbacks:{ onBeforeUpdate: function(){} }
- A function to call right before scrollbar(s) are updated.
Example:
callbacks:{ onBeforeUpdate:function(){ console.log("Scrollbars will update"); } }
callbacks:{ onUpdate: function(){} }
- A function to call when scrollbar(s) are updated.
Example:
callbacks:{ onUpdate:function(){ console.log("Scrollbars updated"); } }
callbacks:{ onImageLoad: function(){} }
- A function to call each time an image inside the element is fully loaded and scrollbar(s) are updated.
Example:
callbacks:{ onImageLoad:function(){ console.log("Image loaded"); } }
callbacks:{ onSelectorChange: function(){} }
- A function to call each time a type of element is added, removed or changes its size and scrollbar(s) are updated.
Example:
callbacks:{ onSelectorChange:function(){ console.log("Scrollbars updated"); } }
live: "string"
- Enable or disable applying scrollbar(s) on all elements matching the current selector, now and in the future.
Setlive: true
when you need to add scrollbar(s) on elements that do not yet exist in the page. These could be elements added by other scripts or plugins after some action by the user takes place (e.g. lightbox markup may not exist untill the user clicks a link).
If you need at any time to disable or enable the live option, setlive: "off"
and"on"
respectively.
You can also tell the script to disable live option after the first invocation by settinglive: "once"
.
liveSelector: "string"
- Set the matching set of elements (instead of the current selector) to add scrollbar(s), now and in the future.
Plugin methods
Ways to execute various plugin actions programmatically from within your script(s).
update
Usage $(selector).mCustomScrollbar("update");
Call the update method to manually update existing scrollbars to accommodate new content or resized element(s). This method is by default called automatically by the script (via updateOnContentResize
option) when the element itself, its content or scrollbar size changes.
scrollTo
Usage $(selector).mCustomScrollbar("scrollTo",position,options);
Call the scrollTo method to programmatically scroll the content to the position parameter (demo).
position parameter
Position parameter can be:
"string"
- e.g. element selector:
"#element-id"
- e.g. special pre-defined position:
"bottom"
- e.g. number of pixels less/more:
"-=100"
/"+=100"
- e.g. element selector:
integer
- e.g. number of pixels:
100
- e.g. number of pixels:
[array]
- e.g. different y/x position:
[100,50]
- e.g. different y/x position:
object/function
- e.g. jQuery object:
$("#element-id")
- e.g. js object:
document.getelementbyid("element-id")
- e.g. function:
function(){ return 100; }
- e.g. jQuery object:
Pre-defined position strings:
"bottom"
– scroll to bottom"top"
– scroll to top"right"
– scroll to right"left"
– scroll to left"first"
– scroll to the position of the first element within content"last"
– scroll to the position of the last element within content
Method options
scrollInertia: integer
- Scroll-to duration, value in milliseconds.
Example:
$(selector).mCustomScrollbar("scrollTo","bottom",{ scrollInertia:3000 });
scrollEasing: "string"
- Scroll-to animation easing, values:
"linear"
,"easeOut"
,"easeInOut"
.
Example:
$(selector).mCustomScrollbar("scrollTo","bottom",{ scrollEasing:"easeOut" });
moveDragger: boolean
- Scroll scrollbar dragger (instead of content).
Example:
$(selector).mCustomScrollbar("scrollTo",80,{ moveDragger:true });
timeout: integer
- Set a timeout for the method (the default timeout is 60 ms in order to work with automatic scrollbar update), value in milliseconds.
Example:
$(selector).mCustomScrollbar("scrollTo","top",{ timeout:1000 });
callbacks: boolean
- Trigger user defined callbacks after scroll-to completes.
Example:
$(selector).mCustomScrollbar("scrollTo","left",{ callbacks:false });
stop
Usage $(selector).mCustomScrollbar("stop");
Stops any running scrolling animations (usefull when you wish to interupt a previously scrollTo method call).
disable
Usage $(selector).mCustomScrollbar("disable");
Calling disable method will temporarily disable the scrollbar (demo). Disabled scrollbars can be re-enable by calling the update method.
To disable the scrollbar and reset its content position, set the method’s reset parameter to true
$(selector).mCustomScrollbar("disable",true);
destroy
Usage $(selector).mCustomScrollbar("destroy");
Calling destroy method will completely remove the custom scrollbar and return the element to its original state (demo).
Scrollbar styling & themes
You can design and visually customize your scrollbars with pure CSS, using jquery.mCustomScrollbar.css which contains the default/basic styling and all scrollbar themes.
The easiest/quickest way is to select a ready-to-use scrollbar theme. For example:
$(selector).mCustomScrollbar({ theme:"dark" });
You can modify the default styling or any theme either directly in jquery.mCustomScrollbar.css or by overwriting the CSS rules in another stylesheet.
Creating a new scrollbar theme
Create a name for your theme (e.g. “my-theme”) and set it as the value of the theme option
$(selector).mCustomScrollbar({ theme:"my-theme" });
Your element will get the class “mCS-my-theme” (your theme-name with “mCS” prefix), so you can create your CSS using the .mCS-my-theme
in your rules. For instance:
.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; } .mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ background-color: white; } /* and so on... */
In the same manner you can clone any existing theme (e.g. “dark”), change its selector (e.g. .mCS-dark
) to your own theme name (e.g. .mCS-my-theme
) and modify its CSS rules.
Scrollbar markup
The plugin applies specific id (unique) and/or classes to every scrollbar element/component, meaning that you can target and modify any scrollbar in more than one ways.
For example, every element with a scrollbar gets a unique class in the form of _mCS_1
, _mCS_2
etc. Every scrollbar container element gets a unique id in the form of mCSB_1_scrollbar_vertical
, mCSB_2_scrollbar_vertical
etc. Every scrollbar dragger gets a unique id in the form of mCSB_1_dragger_vertical
, mCSB_2_dragger_vertical
etc. in addition to the class mCSB_dragger
. All these mean that you can do stuff like:
._mCS_1 .mCSB_dragger .mCSB_dragger_bar{ background-color: red; } ._mCS_2 .mCSB_dragger .mCSB_dragger_bar{ background-color: green; } #mCSB_3_dragger_vertical .mCSB_dragger_bar{ background-color: blue; } #mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; } #mCSB_1_scrollbar_horizontal .mCSB_dragger{ width: 100px; } .mCSB_1_scrollbar .mCSB_dragger .mCSB_draggerRail{ width: 4px; }
User-defined callbacks
You can trigger your own js function(s) by calling them inside mCustomScrollbar callbacks option parameter
$(".content").mCustomScrollbar({ callbacks:{ onScroll:function(){ myCustomFn(this); } } }); function myCustomFn(el){ console.log(el.mcs.top); }
In the example above, each time a scroll event ends and content has stopped scrolling, the content’s top position will be logged in browser’s console. There are available callbacks for each step of the scrolling event:
onScrollStart
– triggers the moment a scroll event startswhileScrolling
– triggers while scroll event is runningonScroll
– triggers when a scroll event completesonTotalScroll
– triggers when content has scrolled all the way to bottom or rightonTotalScrollBack
– triggers when content has scrolled all the way back to top or left
You can set an offset value (pixels) for both onTotalScroll
and onTotalScrollBack
by setting onTotalScrollOffset
and onTotalScrollBackOffset
respectively (view example).
By default, onTotalScroll
and onTotalScrollBack
callbacks are triggered repeatedly. To prevent multiple calls when content is within their offset, set alwaysTriggerOffsets
option to false
(view example).
Additional callbacks:
onInit
onOverflowY
onOverflowX
onOverflowYNone
onOverflowXNone
onUpdate
onImageLoad
onSelectorChange
Returning values
The script returns a number of values and objects related to scrollbar that you can use in your own functions
this
– the original element containing the scrollbar(s)this.mcs.content
– the original content wrapper as jquery objectthis.mcs.top
– content’s top position (pixels)this.mcs.left
– content’s left position (pixels)this.mcs.draggerTop
– scrollbar dragger’s top position (pixels)this.mcs.draggerLeft
– scrollbar dragger’s left position (pixels)this.mcs.topPct
– content vertical scrolling percentagethis.mcs.leftPct
– content horizontal scrolling percentagethis.mcs.direction
– content’s scrolling direction (y or x)
Plugin-specific jQuery expressions
$("#myID:mcsInView")
- Select element(s) in your content that are within scrollable viewport.
As condition:$("#myID").is(":mcsInView");
$(".content:mcsOverflow")
- Select overflowed element(s) with visible scrollbar.
As condition:$(".content").is(":mcsOverflow");
$("#myID:mcsInSight")
$("#myID:mcsInSight(exact)")
- Select element(s) in your content that are in view of the scrollable viewport. Using the
exact
parameter will include elements that have any part of them (even 1 pixel) in view of the scrollable viewport.
As condition:$("#myID").is(":mcsInSight");
,$("#myID").is(":mcsInSight(exact)");
Plugin dependencies & requirements
- jQuery version 1.6.0 or higher
- Mouse-wheel support
License
This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT
Donating helps greatly in developing and updating free software and running this blog 🙂
Hi malihu. I like your plugin so much. But i found some troubles using max-height. Trying and trying I found what doesn’t work.
In my website I’m using the box-sizing:border-box property.
So if my .container has:
-max-height:500px;
-padding:20px;
I can’t see my content when it exceeds 460px and scrollbar doesn’t appear until my content exceeds 500px;
what can I do?
Thank you
for now I had to manually subtract 40 in max height calculation in your script. But if you could help with a definitive solution it’d be so much better 🙂
Amazing script !!!!
Really, it is so usefull !! You’ve saved me.
Hi, really great work!
I use jQuery to display external content in a div and i call mCustomScrollbars function every time i load new content.
But i am doing saome wrong becouse new content is loaded in a blank page.
$(document).ready(function() { $('a.lnk1').click(function() { var url = $(this).attr('href'); $('#inferiore-contenuti').fadeOut("slow").hide().load(url).fadeIn("slow",function(){ mCustomScrollbars(); return false; }) }); });
What am I doing wrong?
this the page: http://www.michelecurreli.it/mic/tourweaver/pubblicazioni/tour%20dentro%20html/HTML+tour/prova_con_tour/prova%20per%20caricaContenuti+CustomScroller.html
thanks in advance.
I think you need to prevent the default browser behavior that opens the link URL:
$(document).ready(function() { $('a.lnk1').click(function(e) { e.preventDefault(); var url = $(this).attr('href'); $('#inferiore-contenuti').fadeOut("slow").hide().load(url).fadeIn("slow",function(){ mCustomScrollbars(); return false; }) }); });
I’d also suggest using plugin’s update method each time your content changes.
Thank’s for your reply.
Now i can load new content into div but after that mCustomScrollbars doesn’t work.
I tried to use plugin’s “update”
I don’t know js very well. What do you think about?
$(document).ready(function() { $('a.lnk1').click(function(e) { e.preventDefault(); var url = $(this).attr('href'); $('#inferiore-contenuti').fadeOut("slow").hide().load(url).fadeIn("slow",function(){ mCustomScrollbars(),function(){ $(this).mCustomScrollbar("update"); return false; } }) }); });
I don’t know if it is the riht way.
Thankyou for any answer.
page link
You need to load the new content inside the .mCSB_container of #inferiore-contenuti (instead of #inferiore-contenuti itself) and then call the update method.
For example:
$('#inferiore-contenuti .mCSB_container').fadeOut("slow",function(){ $('#inferiore-contenuti').hide().load(url).fadeIn("slow",function(){ $(this).mCustomScrollbar("update"); }); });
Hi malihu,
now it’s working very well in local, while doesn’t update in remote, as you can see here.
http://www.michelecurreli.it/mic/tourweaver/pubblicazioni/tour%20dentro%20html/HTML+tour/prova_con_tour/prova%20per%20caricaContenuti+CustomScroller2.html
Any suggestion?
thank’s for your great work.
Hi,
i can’t still do it works on remote.
this is chrome console answer:
Uncaught TypeError: Object [object Object] has no method 'mCustomScrollbar' prova%20per%20caricaContenuti+CustomScroller-noFade.html:132 (anonymous function) prova%20per%20caricaContenuti+CustomScroller-noFade.html:132 r.complete jquery.min.js:5 c jquery.min.js:3 p.fireWith jquery.min.js:3 u jquery.min.js:5 b.fx.tick
If I resize browser window manuallymCustomScroller updates!!
http://www.michelecurreli.it/mic/tourweaver/pubblicazioni/tour%20dentro%20html/HTML+tour/prova_con_tour/prova%20per%20caricaContenuti+CustomScroller-noFade.html#
on local all works well.
Have you any suggestion to fix it?
Thank you.
In a vertical scroller, the scrollbar is on the right side of the content by default. Is there any way to put it on the left side?
The scrollbar styling is done via CSS. Edit jquery.mCustomScrollbar.css and change the properties of
.mCustomScrollBox>.mCSB_scrollTools
(for placement to the left change right:0 to left:0).looks great and is exactly what i need – does it require jQuery 1.9? I got a project where there’s only 1.5 available… sadly no way to upgrade at the moment… did anyone test it with 1.5 ?
It should work fine 🙂
Just tried it with your Demo-Page (should have thought about this earlier…) and confirm that it works with jQuery 1.5 and 1.7 just as well. 🙂
Thanks, great work that saved me a lot of sweat. 🙂
Hi Malihu,
Is it possible to scroll two containers together with mCustomScrollbar?
I willl give some details. I have two divs and everyone holds some text with different languages. I want to scroll in sync this two containers when one of them is scrolled.
I made this by onScoll event and scrolled the passive one with same percent as the active one is scrolled. Is it a correct way ? Or is there any other simpler way to do this.
Here is the link of the page : http://www.ozkanyazilim.com/imc/p/ click on the about menu and first picture to get the mentioned page. I can not give the direct link because the page element are coming by an ajax call.
p.s.: my page is working only in chrome. I couldn’t not resolve this yet 🙂 Any advice is appreciated 🙂
Thanks in advance, regards …
If it works, it is the correct way!
I can’t think of another way to do it. Good thinking 🙂
Hi,
I faced a problem when we are using Jquery animate methods like, slideUp, slideDown, animate(), slideToggle the scroll bar not working properly anyone have solution for this??
Check “Important notes” in “Detailed usage guide”. You probably need to call the update method after your animation are completed (or use the updateOnContentResize option parameter).
Malihu,
Thanks for your great plugin, but I have some problems with it. On one of the pages I used FORM with different inputs. Then I click on text field or text area or search field on the map, it will automatic scroll to top.
Page with problem
I don’t understand why it so. Please help 🙂
Thanks.
P.S. Sorry for my bad English.
Probably some positioning issue with the CSS.
Set autoScrollOnFocus to false (see Configuration), which disables automatic scrolling when focusing on form fileds.
Thanks. 🙂
Now it works correctly.
This is the only working cross-browser scroll I’ve ever seen thanks man. A quick question when I add horizontal scroll bar (horizontalScroll:true), the vertical one gets disabled. Is it normal?
Yes. Both axis scrollbars on the same element is the only feature missing from the plugin. I’ll probably add it on the next major update.
Plugin is great, but all users must be AWARE, that they CANNOT!!! use in any projects, where some code is not publicly available, or the will be breaking GNU General Public License v3 license conditions.
GNU GPL v.3 can be used only! with code licensed by same license.
In other words, if you use this plugin, I will be able to force you in court of law (if I want to bother) to give me source code of your entire project.
I would suggest author use GNU LGPL (note leading L) or dual license it under GNU GPL v.3 / MIT
FYI:
GNU LGPL protects plugin same as GNU GPL v.3, but allows to use it with code, which is not open source.
you may take a look here:
http://en.wikipedia.org/wiki/Comparison_of_free_and_open-source_software_licenses
I think I’ll add MIT license too. Thanks for the info.
+1 for MIT license. Would really like to use this plugin as it is exactly what we need and very well done.
Currently looking for an alternative as company says we can’t use GPL code.
I’m thinking LGPL also.
I’m a bit confused here, in previous comments someone named “Yusef” asked if he can use the plug-in but reference it and Malihu answered “Yeap”. Now here what I’m seeing is we cannot use it in any projects so… 😕
Thanks for your answer in advance.
same here, but when i scroll to top i read this on the right blog panel
You can use the plugin however you like. The comment above is for some special cases (where code is not publicly available). Anyway, I’ll update the license to cover everything.
Thanks! That would be cool!
License updated to L-GPL.
First thanks for your plugin, I’ve been trying to use it in a website I have to make.
However I’ve been facing a weird issue I can’t resolve.
The scrollbar doesn’t show up properly unless I press the F12 button to show Firebug… I don’t really understand why the code understands that it doesn’t need the scrollbar
(I’ve got the noScrollbar class and the scrollTools class as display none until I don’t press F12)
Is there any chance you could help me ? Thanks 🙂
http://img22.imageshack.us/img22/5517/screenshot1le.jpg
I’m having a similar issue. When the page loads the scroll bar isn’t there, but as soon as I re-size the browser window, the scroll bar shows up.
I tried adding the “update” method after I initialize the scroll bar on my div, but that doesn’t seem to help in this case.
Try setting the updateOnContentResize option parameter to true (auto-calls the update method).
That fixed it. Thanks for the assistance!
That worked for me as well, thank you ! 🙂
Thanks malihu.
It’s work for me, I’m using tab bootstrap and show scroll on content
http://jsfiddle.net/cKksC/1/
Hello Manos,
I’m having a little trouble with the “update” method. Right now I have in the same page both your CustomScrollbar and Stu Nicholls’s “Show More” toggle for expanding blocks of text. The two scripts work together without problem, but the scrollbars don’t adapt to the changed dimensions of the page. Can you check out if I made some mistake with the method? The code is like this;
(function($){ $(window).load(function(){ $(".content").mCustomScrollbar({ scrollButtons:{ enable:true } }); }); $(".show").click(function() { $(".content").mCustomScrollbar("update"); }); })(jQuery); </script> <script type="text/javascript"> /* ================================================================ This copyright notice must be untouched at all times. Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved. =================================================================== */ $(document).ready(function(){ $(".hidden").hide(); $(".show").html("show ...."); $(".show").click(function() { if (this.className.indexOf('clicked') != -1 ) { $(this).prev().slideUp(500); $(this).removeClass('clicked') $(this).html("show ...."); } else { $(this).addClass('clicked') $(this).prev().slideDown(500); $(this).html("... hide"); } }); });
Thanks so much for the help!
I figured out the problem; I was using the old version of the scrollbar plugin, with the new release it works – now code’s like this;
(function($){ $(window).load(function(){ $(".content").mCustomScrollbar({ scrollButtons:{ enable:true } }); }); $(document).ready(function(){ $(".hidden").hide(); $(".show").html("continua ...."); $(".show").click(function() { if (this.className.indexOf('clicked') != -1 ) { $(this).prev().slideUp(500); $(this).removeClass('clicked') $(this).html("continua ...."); $(".content .mCSB_container").append(data); //append new content inside .mCSB_container $(".content").mCustomScrollbar("update"); //update scrollbar according to newly appended content } else { $(this).addClass('clicked') $(this).prev().slideDown(500); $(this).html("... chiudi"); $(".content .mCSB_container").append(data); //append new content inside .mCSB_container $(".content").mCustomScrollbar("update"); //update scrollbar according to newly appended content } }); }); })(jQuery);
There is still one thing amiss – in the example page with Ajax, when clicking on append new content the scrollbars resize themselves to show the new content. In my page they stay they same size, although they now scroll (very fast) to the end of the page… though once there they don’t immediately scroll upward again, you must either collapse the block or drag the bar upward with the mouse. How can I fix this?
And figured out that too 🙂 I had to replace ‘data’ with ‘clicked’. Now it work ^_^ Love the Custom content scroller!
Hmm nevermind the part about figuring out – turns out I didn’t. By replacing data with clicked the scroll adapts indeed (only when you collapse the blocks, though) but a “clicked” text appears on bottom of the page. Also the scroll *still* does not scroll upward once it reaches the end of the page. Frustrating… what am I doing wrong??
Hi,
that is really great work! Has anybody figured out how to make the scroll always visible?
It seems scroll appears only when there is something to scroll and I would like it to be always there if that is possible. I tried doing it on my own but even though my approach works in FF, Chrome and IE10, it crashes in IE8 and IE9 :(.
Cheers!
Hi,
thank you very much for this great plug-in. I like it very much!
Only IE7 makes troubles. Is there anybody who has the same problem and fixed it?
Thank you very much
Steph
Wow! great work.I’ve tried other plugins but found this one very useful…but i got some problems..When scrolling stops in a div the whole page starts to scroll.You can see this problem in the plugin’s demo page.How can i prevent this??Plz help me..Thanks in advance.. 🙂
Hi and thanks for your comments,
You can’t really prevent it (well, not unless editing the plugin script itself). I made the scrollbar so it behaves like the native browser’s one.
poli kalo file! bravo!
Ευχαριστώ 🙂
Malihu,
Would it be possible to have this plugin released under a different license?
I work on an open-source framework that is used by commercial entities, and if we were to include this library, we would have to release our software under GPL licensing (instead of Apache 2), which would mean that our clients would have to open-source their commercial products.
Thank you very much!
I’ll either add MIT license or change it to LGPL.
I have applied this plugin for a horizontal image scroll slider, and the slider is lagging or stuttering when viewed in chrome and safari,But works fine in Firefox.The lagging increases with increase in total number of images appended to the horizontal scroll.
Kindly help me out in this regard.
Try changing your images CSS. Certain properties like box-shadow can decrease performance in webkit browsers.
Thanks for your reply.I have cross checked the image CSS and no such performance reducing properties. The dragger bar is actually not sliding smoothly ,as one drags the dragger bar the image sliding stops for a second or two and then directly jumps to image corresponding to the position of dragger bar stop.
Kindly suggest a solution.
The bug was on my side and its fixed now.Thanks a lot for the wonderful plugin.
Hi,
M stuck in deep. Whenever i called the .mCustomScrollbar() inside the dynamic div content inside bootstrap popover it doesn’t work even after i tried destroy and then rebuild then update method. The worst thing is if anyhow i mange the scrollbar in right way even after it doesn’t work when popover called multiple times.
Thanks in Advance 🙂
Make sure you’re calling .mCustomScrollbar() on existing elements in your page. Also make sure bootstrap doesn’t remove them when running the popup.
Hi,
Malihu, how can we use mCustomScrollbar() with dynamic objects which is getting by Ajax Calls. I’m using it with calling initScroll function which is calling mCustomScrollbar for the objects which is already loaded into the page. Is that the correct way ?
I’m asking this question because, my project and the scrollbars are working very well on chrome browser, but not in Firefox or IE. Scrollbars are showing but not scrolling.
Thanks for your response Malihu, definitely the problem was occurring due to bootstrap because whenever the popover called multiple times bootstrap completely remove it’s content and then append to the body.
Also we can use mCustomScrollbar within dynamic element and for this all we need to do is just called $(‘element’).mCustomScrollbar(); on Ajax success or wherever we are going to append new element.
Last but not least I’m working as a web designer but my approach to learn jQuery is endless……:P
Hey, nice Plugin 🙂 I use the dark themes with buttons – the mouseover-button is white – in every browser – can you confirm this? I although could depends on my complete CSS – ist very complex. Thx Marky
First think than write 🙂 with !import on the background sprite it works know. I think this should by in the standardversion. Thx Marky
Is it possible to bind scrolling on “onclick” event directly in the string?
<p class="some-class" onlcik="mCustomScrollbar('scrollTo','bottom')"></p>
Yes, but you need to specify the selector:
$('.your-class').mCustomScrollbar('scrollTo','bottom')
Hi, Great plugin! thanks for sharing.
Question, can the script start with the scroll bar disabled? like,
$("#id").mCustomScrollbar("disable");
but on the first call of the function with its options.Thanks!
If you don’t call
$("#id").mCustomScrollbar();
, you don’t need$("#id").mCustomScrollbar("disable");
.Hi,
First, I love your plugins and have used the first version of the custom scrollers fairly successfully in my site.
Second – I am pretty much a weekend warrior/noob teaching my self on the weekends and have been having a little difficulty upgrading to the new versions.
The problem I am struggling with is the scrollTo callback as follows… I have been trying to add a button that moves the scroller n number of pixels in addition to the current scroll location.
This works for going to predefined location:
$(“#scroll_to_here”).click(function(){
$(“#content_1”).mCustomScrollbar(“scrollTo”, 200);
});
But this moves the scroller in unpredicted ways – even though the scroller is at 100 – when I click the button it moves to random locations:
$(“#scroll_to_here”).click(function(){
$(“#content_1”).mCustomScrollbar(“scrollTo”,(mcs.draggerTop)+20);
});
Hi!
Firstly, I’d like to thakn for great pluginyou are sharng.
Secondly, I would like to ask for little help. I am not able to find sollution to use customized plugins in case that content is smaller than container and overflow is set to Scroll.
Thank you very much
Milan
Man I am stuck
Please help me.
Problem: mscrollbar not working with slideToggle, slidedown.
my html
<div class="content"> <h1>Product Title</h1> <div class="product_info"> <div class="product_menu left"> <ul> <li id="a"><a>Overview</a></li> <li id="b"><a>How To Use</a></li> <li id="c"><a>Nutrition Info</a></li> <li id="d"><a>Ingredients</a></li> </ul> </div> <div class="nodisplay" id="ov"><h2>Overview</h2></div> <div class="nodisplay" id="hu"><h2>How to use</h2></div> <div class="nodisplay" id="nf"> <h2>Nutrition Facts</h2> <p><span class="left">Serving size 16 oz</span><span class="right">Serving per container 1</span></p> <table> <tbody> <tr><td colspan="2">Amount per serving<hr></td></tr> <tr><td>Calories 583<hr></td> <td> Calories from Fat 139<hr></td></tr> <tr><td colspan="2" >% Daily value*<hr></td></tr> <tr><td><b>Total Fat 16g</b><hr></td> <td>25%<hr></td></tr> <tr><td>Saturated Fat 12g<hr></td> <td> Calories from Fat 139<hr></td></tr> <tr><td> Trans Fat 1g<hr></td> <td> Calories from Fat 139<hr></td></tr> <tr><td>Cholesterol 63mg<hr></td> <td> Calories from Fat 139<hr></td></tr> <tr><td>Sodium 161mg<hr></td> <td> Calories from Fat 139<hr></td></tr> <tr><td>Total Carbohydrate 77g<hr></td> <td> Calories from Fat 139<hr></td></tr> <tr><td>Dietary Fiber 4g<hr></td> <td> Calories from Fat 139<hr></td></tr> <tr><td>Sugars 3g<hr></td> <td> Calories from Fat 139<hr></td></tr> <tr><td><b>Protein 33g<hr></b></td> <td> Calories from Fat 139<hr></td></tr> <tr><td>Vitamin A<hr></td> <td> Calories from Fat 139<hr></td></tr> <tr><td>Calcium<hr></td> <td> Calories from Fat 139<hr></td></tr> </tbody> </table> </div> <div class="nodisplay " id="ig"><h2>Ingredients</h2></div> </div> </div>
my css
.content { font-family:Arial, Helvetica, sans-serif;position: relative} .product_info{width: 950px;height: 420px; padding:5px 5px 0 5px;} .product_menu{ width:240px; height:auto; position: relative; top:70px;font-family:'Sofadi One', cursive; font-size: 1.4em; } .product_menu li {list-style: none; cursor: pointer} .product_menu li a{padding: 10px; display: block; border-bottom: solid 1px #999999;} .product_menu li a:hover{box-shadow: 0 0 5px #cccccc;} .nodisplay{display: none; box-shadow: 0 0 5px #cccccc; width:370px; height: 405px; padding:10px; overflow-x: auto; border-color:#999999; background-color: #fff; position: relative; -moz-border-top-left-radius: 10px; -moz-border-top-right-radius:10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius:10px; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 0.8em; position: absolute; bottom: 0; right: 5px;} .facts { box-shadow: 0 0 5px #cccccc; width:370px; height: 405px; padding:10px; overflow-x: auto; border-color:#999999; background-color: #fff; position: relative; -moz-border-top-left-radius: 10px; -moz-border-top-right-radius:10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius:10px; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 0.8em; position: absolute; bottom: 0; right: 5px; } .facts h3, .facts h2, .nodisplay h3, .nodisplay h2 {color:#fff;background-color: #000; } .facts p {margin-bottom: 25px;} .left{float: left} .right{float: right} table {width:300px;margin: auto; border-collapse: collapse;background-color: #09C;} .content h1{margin: 20px;font-family: 'Wellfleet', arial;}
my js
$(document).ready(function() { if($('#ov').css('display', 'none')){ $('#ov').slideDown("slow").css('display', 'block'); }else{ $('#ov').css('display', 'none'); } $('#a').click(function(){ $('#ov').slideToggle("slow").addClass('facts'); $('#nf, #hu, #ig').slideUp(123); }) ; $('#b').click(function(){ $('#hu').slideToggle("slow").addClass('facts'); $('#nf, #ov, #ig').slideUp(123); }); $('#c').click(function(){ $('#nf') .slideToggle("slow") .addClass('facts') .mCustomScrollbar({scrollButtons:{enable:true},theme:"dark-thin",scrollInertia:100}); $('#hu, #ov, #ig').slideUp(123); }); $('#d').click(function(){ $('#ig').slideToggle("slow").addClass('facts'); $('#nf, #ov, #hu').slideUp(123); }); }); <code>
You should call mCustomScrollbar function normally within your docyment ready fn:
$(document).ready(function() { $('#nf').mCustomScrollbar({ scrollButtons:{enable:true}, theme:"dark-thin", scrollInertia:100 }); if($('#ov').css('display', 'none')){ ...
and call its update method as a callback function on slideToggle:
$('#nf').slideToggle("slow",function(){ $('#nf').mCustomScrollbar('update'); }) .addClass('facts');
To see why your code doesn’t work as it is now, check “Important notes” in “Detailed usage guide” section.
Hello,
in the first place, congrats for the excellent plugin. I really love it!!!
But I’m having a little problem using IE.
When I scroll down the content, the div is going down too… lol… like the IE leave a white space where the content would be if the overflow was not hidden…
You can check this online: http://www.contaconline.com.br/site/novo_/
Top box on the left…
Could anyone help me… 🙁
Thank you in advance
Best regards.
Seems to be working now (checked on ie10).
I’m testing on IE9 and I think that a lot of users dont use IE10 yet… 🙁
Check this print: http://www.contaconline.com.br/site/novo_/images/bug.jpg
Is there any solution?
Thank you so much for your time… 🙂
Hey! I solved the problem putting’ “position:absolute” on the div…
I dont know if this is the correct way, but it worked… 🙂
thank you again!
is it possible to use scrollers in a scroller i want to change sites every scroll-bars .
pls tell me this thing. ty
Hello Malihu,
Is it okay to use this plugin for commercial use? for free but I’ll provide credits for the scrollbar on the site’s source somewhere.
Thanks.
Yeap
Hello,
Do you mean that is also released under another license than the GPL (http://www.gnu.org/licenses/gpl.html)? Because, using your awesome plugin under the GPL, as it is stated on Github (https://github.com/malihu/malihu-custom-scrollbar-plugin) means than the whole project which uses it turns into a GPL project, which sources have to be distributed on demand if the project is available online.
Cheers!
Thomas
So when I view my website in google chrome the scroll bar lags badly and I don’t understand why. However, if I use Fire Fox or Internet Explorer it works perfectly. any ideas?
http://creative-onslaught.com/Onslaught/
I am using contenteditable div, scrolling is working fine. But i couldn’t find my cursor and characters (after overflow, its going down) while entering data. I had tried with (scrollTo,bottom), its working when i entering values in last line. Once i scroll top and entering values from first, then same problem obtained. how can i solve this issue