jQuery custom content scroller
![jQuery custom content scroller](http://manos.malihu.gr/wp-content/uploads/2014/10/custom-scrollbar.png)
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 🙂
Thanks, the plugin works in my project.
But if is it possible to use both vertical and horizontal scrollbar on the same element?
Also I have a message alerter in my project like this:
function #{alias}(){ var msg="#{facesMessages}"; if(msg!=""){ alert(msg); } } window.setTimeout("#{alias}();", 100);
It is in every page’s end before call mCustomScrollbar function, and with your plugin it alert everything twice instead once now, could you tell me where in your plugin may cause this problem? Thanks a lot!
And sorry for my English.
The plugin is working but messing up my subclasses for the div I apply it to.
I have other divs with subclasses with height in %. And it messes it up.
Actually is messes the parent containers height, and it doesn’t work if I use set_height
Bottom scroll button doesn’t work for me – instead of scrolling down, it scrolls the content up, just like the top scroll button. What could be the possible cause of this? Do I need to configure it?
Hi ! Thanks for the amazing job !
I just have a problem with the scrollto plugin : I want it to react like an anchor so, when clicking on an element, it will scroll to the defined id element… is it possible ? Because when using the plugin the way you introduce it, it scroll to the defined id element on page loading !
thanks in advance!
Hey Malihu,
This is an amazing plugin and I’d love to use it but it doesn’t seem to be compatible with jquery mobile. Is there some fix for this? Thanks!
It works for content but not the body tag.
Hello there!
FANTASTIC plug in, great work.
Question- Internet Explorer is still showing the default scrollbar area alongside the custom scroll bar plug in- Can u tell me how to fix this?
Thanks in advance for the help!
AB
Hey if anyone else has a solution to this that would be awesome too. I cant get the default area to disappear in IE and its throwing one of the layout elements off.
Anyone else experiencing this?
Hey malihu!
Is it possible to create a method to scroll X pixels to one of the directions (up, down, left, right) ?
Great job on the plugin! 🙂
Hi
(function ($) {
$(window).load(function () {
$(“#dvSubButtonTabs”).mCustomScrollbar({
horizontalScroll: true,
scrollButtons: {
enable: true
},
//autoHideScrollbar: true,
theme: “dark-thin”
});
});
})(jQuery);
At very first time it’s working fine, after postback not working.Pls hep
did anybody find solution for this issue? if yes, pls help me.
I’m also facing the same problem.
Hi,
Great job !
I had just one problem : in a div with horizontal scroll i use input.
Those input couldn’t be edit because of the infinite loop mCSB_onContentResize (i don’t know why a loop at this time).
option:
horizontalScroll:true,
advanced:{
updateOnContentResize: true,
autoExpandHorizontalScroll:true
}
Sorry for my bad english
Is there a method or value to pass such that when I get to the end of a nested div scroll the outside div scroll won’t start scrolling?
Thanks, this is a great plugin btw! makes my site look sharper.
hi, i am trying to use the infinite scroll but i noticed that it just keeps restyling the same content. how do i get it to call different content everytime you scroll to the bottom. any help would be appreciated, this plugin is amazing!
This is a very nice plugin… nice job Malihu
Is there an option to make the scroll bars invisible but still retaining their functions?
Hey Chris,
You might be able to override the css like this :
// override the scrollbar on normal behaviour .mCS-dark > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2); /* Replace the opacity 0.2 by 0 to get transparent */ } // override the scrollbar on hover behaviour .mCS-dark > .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); /* Replace the opacity 0.7 by 0 to get transparent */ }
You can do so many things overriding the styles ! 🙂
Enjoy !
Thanks for the great plugin! It works perfectly for me!
Regards,
Julian
Hi Malihu !
First of all, thanks for that wonderful plugin ! You really contribute to improve the web and our minds ! so, thank you !
I actually faced to a big problem for me: the fact it’s not possible to zoom (pinch in/out on iPad for example) when using your plugin. That’s really a pity because some other plugins not as complete as yours seem to be ok with that.
But, reading further into your documentation, I noticed on the “disable & distroy methods example” that disabling the scrollbar allow to zoom!
Here is my simple code which allow using zoom:
function MyGesture(element) { var self = this; element = $(element); this.init = function() { // see Apple's Safari Developer Library -> GestureEvent Class Reference for a list of the gestures. element.on('gesturestart', function(ev) { $('#scrolling_area').mCustomScrollbar('disable'); // disable only, not distroy }); element.on('gestureend', function(ev) { $('#scrolling_area').mCustomScrollbar('update'); // re-activate at the same position }); }; }
$().ready(function() { var myGesture = new MyGesture('#scrolling_area'); myGesture.init(); });
Like this, it works very well ! The only problem is that when you pinch in, scrolling will still work, so moving inside the zoomed page will require using 2 fingers (create gesture) when moving over the scrolling area. The rest of the page will require only 1 finger ( normal behavior : ‘swipe’).
My scrolling area is horizontal, so I guess if I desactivate the scroll while I’m operating a drag up or drag down (only require one finger), it might solve the problem… But this last tip, I haven’t tried it yet.
Anyway, I hope it will be useful to many people!
Thanks again Malihu for your amazing work!
Lechampi
/*”/very well thought out and carefully written plug-in that allows for a wide range of manipulations, I expect you new, amazing plugins!
tanx a lot
Hi,
Thanks for your great effort
I wonder how i can replace browser main scrollbar with your own customized version.
I’m using joomla 3 with bootstrap and i want to make custom scrollbars
please help with instructions
My regards
Hi,
This plugin doesn’t work, if is used jquery-ui.min.js in the same project. Any ideas how to fix it? Thanks
I’m using this custom scrollbar for a chat window.. so the content will be loading when we send or recieve messages.. I’m loading this scrollbar when the div has got a scrollbaroption… Also, I’m using “advanced:{updateOnContentResize:true}” as the content will be loading when we chat… For the first time when this scrollbar is getting activated, I’m scrolling to bottom by using “$(“#id”).mCustomScrollbar(“scrollTo”,”bottom”)” … But this is working only for once.. this has to be done when a new message is done or received..
Hi Malihu, this is really a great scroller, but unfortunately the dragger does not work in IE !! Is there any hint to fix this? Greets Yoko
Hi,
Do the examples and demos work on IE? I need more information like browser version, OS and probably a link with your implementation in order to help.
Hi, thank you very much for your reply! No, unfortunately all other examples and demos that are used the current build of the scroller doesn’t work in IE 11 who is released with the recent release of Win 8.1.
It seems that the dragger is not registered the click event.
Thank you, in hope of a hint …
Yoko
Hello,
(Sorry for my bad English)
I’ve the same problem. But, I’ve found this :
http://manos.malihu.gr/tuts/jquery_custom_scrollbar_vertical.html
For me it’s work fine on IE.
Solution ?
Thank you
Pointer events are now updated (latest version: 2.8.3).
I’ve found why IE bug with Windows 8.1
In Internet Explorer 11 in the “developper tools” by default “Edge mode” is selected. If I change for an other mode the plugin works fine.
I hope help you with this information
The issue is with how IE11 detects pointer events. The way the plugin is checking for pointer event support is: window.navigator.msPointerEnabled, which returns true in IE11. The problem is that IE11 doesn’t support the vendor prefixed versions of the pointer event.
If you find the if statement where $.support.msPointer is being checked (under /*scrollbar drag scrolling*/) and remove the if so that only the else code is run or you change the pointer events to the non-vendor prefixed versions then IE11 works fine in my use cases. I imagine this may break in some cases but the offending code is the pointer events.
Found a better way to fix this.
The agent string in ie11 is ‘Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko’ (Microsoft is taking some effort in hiding it is IE, so they stoped using the MSIE in the Agent String).
So I added a user agent check for ‘MSIE’ in the if that checks support for msPointer:
changing the line :
if( $.support.msPointer){ /*MSPointer*/
to
if( $.support.msPointer && navigator.userAgent.match(/MSIE\./)){ /*MSPointer*/
So far this have worked everywhere I’ve tested.
thx for that soulution. works exactly as expected.
Pointer events updated on latest version (2.8.3). Thanks for the feedback.
Thank you very much!
Doesn’t seem to work in IE 10 you don’t get the styled scrollbar just the browser scrollbar
Hi,
The plugin works well on IE10 (tested on win7 and 8). Please check if your implementation is correct and for any console errors.
These scrollbars are wonderful!!
I’m working on a web application chat window UI, I wanted to use a dark-thick jquery scrollbar for the Chat message body. The chat window will be opened upon click of a button after 8 seconds. Below are my questions…
I’m able to add this custom scrollbar using Chrome develepor tools console and found the below problems..
1. Where do I need to write the code “$(“#id”).mCustomScrollbar()” as the chat window is loaded upon the click of a button;
2. Also, in the message body div element the scrollbar plugin is creating another div with classes “mCustomScrollBox mCS-dark-thick”. Whenever a message is sent, we are creating another div element to show in the message body. But this div is loading below the “plugin div”, which is not correct as the messages are shown from bottom;
how to auto move up or down?
Hi,
I’m trying to implement your scrollbars on jquery colorbox, specifically this wordpress version http://wordpress.org/plugins/jquery-colorbox/, but it’s not working see here for full details:
http://stackoverflow.com/questions/19457574/jquery-colorbox-and-custom-scrollbar
It’s looking fantastic. Thanks for such a wonderful plugin…
How can I use this in iframe and page body????
Thanks .
First of all, thank you for a great plugin. I played around a bit and it seems really nice and straightforward, however, I’m facing a weird issue: in a site using Skrollr, the whole dragbar and arrows aren’t showing. However, if I inspect the element, they suddenly show up. There are no message errors, the paths are OK (obviously since things show up at some point) and everything seems to be fine… but nothing shows up. I’m quite sure this is a Skrollr thing since it has quite a bunch of bugs on the CSS side, but maybe you know what is causing this and how to solve it.
Anyway, thank you again
F.
Hi Malihu, Thanks a lot for such a great plugin. I have used it into my application and now it looks cool but at the same time i am facing an issue with it. My application is server side and the technology i’m using is ASP.net.
i have used a telerik rad treeview to display some data hierarchy which comes from data-base inside a Division (div) on which i have applied the mCustomscrollbar but the problem i’m facing is, when i click on the lowest node or any of the node that comes after scrolling the tree, postback occurs and the scroll bar goes to the top of the tree.
Q. HOW TO MAINTAIN SCROLL POSITION SO THAT A USER SEE ONLY THAT NODE WHICH IS CURRENTLY CLICKED/SELECTED?
i have also used an AJAX panel for the same, but doing that also not fixes the issue.
waiting for your reply . . . . 🙂
I have the same problem.
Try
advanced:{
autoScrollOnFocus: false
}
Hi . . 🙂 , thanks for the reply, I have tried this earlier but doesn’t work for me. Is there any other way?
a very good plugin!
but I miss one important function:
scroll page down if you click below the scrollbar dragger, and scroll pageup when you click above them, like every browser scrollbar do that.
thank you!
works bad in IE6 and IE7
Any IE version below 8 is not supported any more.
i place a inside a and call function:
$(“div”)…
it works well but when i click in the form (radio button,check box ..) the form auto scroll up 🙁 .How do i fix it (disable auto scroll)???
thank for help 🙂