jQuery custom content scroller
Code examples and tutorials
Responsive custom scrollbar with CSS3 media queries
How to use custom scrollbar plugin with CSS3 media queries and switch between vertical and horizontal scrollbars according to viewport size.
Add a custom scrollbar to your twitter widget
Add a great-looking and highly customizable scrollbar to your twitter widget.
Scroll to id within element with custom scrollbar(s)
A simple jquery function to make all links pointing to id attributes within the page, work on content with custom scrollbars.
Horizontal custom scrollbar tutorial
Extensive tutorial for creating horizontally stacked content with the custom scrollbar plugin.
Hi
I can not change the default to the horizontal axis
(function(){
$(window).on(“load”,function(){
$(“#metro-box”).mCustomScrollbar({axis: “x” });
});
})(jQuery);
would you help me plz
use a class, not a div 😉
How can I decrease the width of the background of the scroll bar.
Hi,
Suppose you scroll over a set of div, each one having an id.
Is there’s a way to have a trigger enabling to run a function each time one of the div is displayed whatever the scrolling is down or top ?
Thanks for quick directions,
Pierre
This is really amazing post, thanks for sharing.
The plug in seems not working very well with newer Jquery version like JQuery 3.5.1 .
Is there any chance you can fix that.
Big thanks
is it possible to scroll the content with mouse drag ?
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…
Agreed! The scroll on the latest jQuery version is so janky
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