jQuery custom content scroller
Frequently Asked Questions
-
Set scrollInertia option parameter to 0 (zero)
$(selector).mCustomScrollbar({ scrollInertia: 0 });
-
There's an object generated by the script which lets you know how scrolling events where last triggered. The object returns
"internal"
(default) for events triggered by plugin script or"external"
for events triggered by other scripts (e.g. via the scrollTo method).
You can access the object like this:object.data("mCS").trigger
Example:if($(selector).data("mCS").trigger==="external"){ //last scrolling event was triggered by scrollTo method }else{ //last scrolling event was triggered by the user }
-
You can use mouseWheel:preventDefault option parameter:
$(selector).mCustomScrollbar({ mouseWheel:{ preventDefault: true } });
This will affect mouse-wheel scrolling. There's no option for touch, as depending on the device, page layout and zoom level, it can easily render the page/rest of the content unusable.
-
To update the content on elements that already have custom scrollbar(s), you need to add/append the new content inside the
.mCSB_container
element (instead directly to the element you calledmCustomScrollbar
function).
Example://scrollbar initialization $(".content").mCustomScrollbar(); //at some point later on (within another script, function, ajax call etc.) $(".content .mCSB_container").append("
new content...
"); //or targeting a specific .mCSB_container element (usefull with nested scrollbars) $("#mCSB_1_container").append("new content...
"); -
This is done via CSS. You can edit directly jquery.mCustomScrollbar.css or overwrite the rules in your own stylesheet. The buttons classes are
mCSB_buttonUp
andmCSB_buttonDown
. By default, the arrow images are set using CSS image sprites, meaning that all themes arrows are contained in a single file: mCSB_buttons.png.To change the dimensions of the buttons, you need to adjust few additional CSS rules to compensate for the new buttons sizes. Below is an example of changing the size of buttons to 26x26 pixels (from the default 16x20 pixels) with a custom image for each one.
-
There are multiple ways of doing this. You can use specific theme(s) (e.g.
"minimal"
), option parameters likescrollbarPosition
and/or edit the CSS rules directly. For more info see author's reply to a similar question in comments. -
You can have a fixed size scrollbar that doesn't change its dimensions according to content length by following these steps:
- Set
autoDraggerLength
option tofalse
- Set your desired scrollbar height on line 106 of jquery.mCustomScrollbar.css, or in your own stylesheet using the "mCSB_dragger" class:
.mCSB_scrollTools .mCSB_dragger{ height: 30px; }
For horizontal scrollbars, set its width on line 177 of jquery.mCustomScrollbar.css, or in your CSS:
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; }
- Set
-
You can use the
live
option parameter and callmCustomScrollbar
function normally without having to wait for the dynamic elements to be available in the DOM.
Example:$(selector).mCustomScrollbar({ live: "on" });
You can also use:
live: "once"
to disable the live option event after the first invocation.To disable the live option at any point set
live
option to"off"
:$(selector).mCustomScrollbar({ live: "off" });
An alternative way to
live
is theliveSelector
option parameter which you can define the matching set of elements (instead of the current selector) to add scrollbar(s) when available:$(selector).mCustomScrollbar({ liveSelector: ".my-future-class" });
-
Yes but for the horizontal scrollbar you'll need a couple of special CSS rules. See this comment for code examples.
-
Normally, if your content works with browser's default horizontal scrollbar, it should also work with the custom one. If you've already set
axis: "x"
(to enable horizontal scrollbar), there's a good chance you also need to setautoExpandHorizontalScroll
option parameter totrue
. For example:$(selector).mCustomScrollbar({ axis: "x", advanced:{ autoExpandHorizontalScroll: true } });
-
Yes. See this thread on github. You can do
$(selector).data("mCS").opt.mouseWheel.scrollAmount=0;
to disable it and$(selector).data("mCS").opt.mouseWheel.scrollAmount="auto";
to (re)enable it. -
There are more than one ways available to start scrolling from the bottom at initialization:
1. Chaining scrollTo method
$(selector).mCustomScrollbar({ //your options... }).mCustomScrollbar("scrollTo","bottom",{scrollInertia:0});
2. Using
setTop
option$(selector).mCustomScrollbar({ setTop:"-999999px" });
-
If you're developing a right-to-left (RTL) text web page, the scrollbar will switch to the left side automatically (assuming you're using either HTML
dir="rtl"
or CSSdirection: rtl
). To set the scrollbar on the left manually, you need to change or overwrite the rules in lines 65 and 54 of jquery.mCustomScrollbar.css.For example, adding the following to your CSS will overwrite the above rules and set the default vertical scrollbar on the left of content:
/* reset/remove right position so scrollbar appears on left */ .mCustomScrollbar .mCSB_scrollTools{ right: auto; } /* switch margin from right to left */ .mCustomScrollbar .mCSB_inside > .mCSB_container{ margin-right: 0; margin-left: 30px; }
-
You can do this by checking the viewport width and initializing or destroying the custom scrollbar accordingly. The condition to check viewport width should match CSS media queries and triggered on page load and browser resize. There are two ways you can do this:
1. Using
Window.matchMedia()
(IE10+)(function($){ $(window).on("load resize",function(){ if(window.matchMedia("(min-width: 640px)").matches){ $("#your-element-id").mCustomScrollbar({ /* scrollbar options */ }); }else{ $("#your-element-id").mCustomScrollbar("destroy"); } }); })(jQuery);
2. Checking a CSS rule that the media query changes (should always work)
Assuming your element is
#content-1
:/* CSS */ #content-1:after{ display: none; content: "custom-scrollbar"; } @media screen and (max-width: 640px){ #content-1:after{ content: ""; } }
/* JS */ (function($){ $(window).on("load resize",function(){ var selector="#content-1", //your element(s) selector cssFlag=window.getComputedStyle(document.querySelector(selector),":after").getPropertyValue("content").replace(/"/g,''); if(cssFlag){ $(selector).mCustomScrollbar({ /* scrollbar options */ }); }else{ $(selector).mCustomScrollbar("destroy"); } }); })(jQuery);
-
Yes but you’ll need extra markup to separate
thead
fromtbody
and fixed-width (in pixels, percentage etc.) table cells. This is the best way to have a table with fixed header with or without a custom scrollbar.I've created a working example at http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/table-fixed-header-test.html which uses 2 separate tables (one for header and one for body) and 2 extra divs (one body wrapper and one overall wrapper).
Can you please make it compatible with the jQuery Latest version.. There are many themes and plugins which uses your custom scrollbar.. I would request you to do that..
I saw jQuery.fn.bind() is deprecated in the plugin of yours…
If you have problems displaying the horizontal slider on mobile devices set parameter “autoHideScrollbar” to “false”
Hi there is a problem on new safari in Iphones, if you have text only container its work well, but if you have clickable elements, when you hit that element(e.g. a href) it stop scrolling and start hover that elemen and you cant scroll further.
best regards. W.
contentTouchScroll is not working while swiping left and right in mobile. Kindly provide me any solution for this.
Thank you
Download free all source WordPress, Plugin, Html templates, Psd…
https://everydaytheme.com/
Download free all source WordPress, Plugin, Html templates, Psd… at:
https://everydaytheme.com/
I have made the content of my scroller responsive, okay. But how can i adjust the “snapAmount” to the different values of height?
Thank you for help.
Stefanie
Hi,
We are using mCustomScrollbar and it’s working fine.
while working with this… iFrame content on website gets removed.
Can you suggest suitable solution for this ?
Thank you.
error with jquery v3.5.1
trying to scrollTo a position in modal-body(fixed heigth and overflow-y:auto) from the main page when open the modal. I get the proper #id and listen for when its open
$("#Modal").on('shown.bs.modal', function(){ $('#content').mCustomScrollbar('scrollTo',"#id"); });
and nothing happens
Any suggestions
Hi,
is there a way to get mouseWheel back on body/html when onTotalScroll ?
I tried, but I can’t figure how…
Best regards,
Antoine
Hi,
I am using Malihu scrollbar in my application but I am not able to use the scrollbar in mobile devices. please reply with solution
I have implemented jQuery UI sortable in my project. In my implementation I have large number of records which around 10,000 at an average. I store the index of each record in my database.
The implementation is working fine but due to mCustomScrollbar, the sorting feature is very jerky. The scrolling do not work properly when I reach last visible record.
Hello Malihu,
I’m asking you to help me with something I’m stuck with.
I have prepared a modal plugin.
When it reaches the maximum height, mCustomScrollbar is activated.
It works super.
Only I have Selectize on my form pages.
You cannot scroll through the Selectize menu with the mouse.
The mouse works for mCustomScrollbar.
I used the following parameter to cancel scrolling while on the Selectize element.
But it didn’t work.
The .selectize-control element is the top layer.
Is there anything wrong?
articlectnscroll.mCustomScrollbar({ theme: "minimal-dark", mouseWheel: { disableOver: ['.selectize-control', '.selectize-control *'] } });
(Sorry, I used google translate for english)
Hi,
Did you got any solution for your problem.Recently I am facing same problem
is this project alive?
https://uzmanim.net
Is there a way to make it work along with NodeJS and EJS? It seems to be buggy and won’t scroll properly
How can i use mCustomScrollbar for browser default scrollbar?
I used:
$("body").mCustomScrollbar({ theme: "minimal", scrollButtons: { enable: true } });
but dose not work.
I have to make the 1st section to sticky to top when I perform wheelscroll and also when I click on the link to go to specific section.
Is there a Tutorial or video to use jQuery custom content scroller with the Elementor Page Builder – this is brilliant and exactly what I need for my site!
I have an images slider inside the mCustomScrollbar and in mobile devices I can not swipe left this slider, because mCustomScroll prevents it. Is it possible to make Stop Propagation? Thanks!
Is there a way within the plugin to hide the scrollbar but leave the arrow buttons for scrolling?
How can I User mCustomScrollbar and AutoComplete
focus:function(e,ui){
/* scroll via keyboard */
if(!ui.item){
var first=$(“.ui-autocomplete li:first”);
first.trigger(“mouseenter”);
$(this).val(first.data(“uiAutocompleteItem”).label);
}
var el=$(“.ui-state-focus”).parent();
if(!el.is(“:mcsInView”) && !el.is(“:hover”)){
$(“.ui-autocomplete”).mCustomScrollbar(“scrollTo”,el,{scrollInertia:0,timeout:0});
}
},
This code not working
Download Free html Template
http://www.codepopular.com
Hello,
How can I decrease the width of the background of the scroll bar.
I’m talking about reducing the size of the scroll bar, which is too far from the content to scroll.
Thank you for your help
YC