This website uses cookies to personalise ads and to analyse traffic ok
web design

jQuery custom content scroller


Frequently Asked Questions

  • Set scrollInertia option parameter to 0 (zero)

        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:"mCS").trigger

        //last scrolling event was triggered by scrollTo method
        //last scrolling event was triggered by the user
  • You can use mouseWheel:preventDefault option parameter:

        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 called mCustomScrollbar function).

    //scrollbar initialization 
    //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 and mCSB_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 like scrollbarPosition 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:

    1. Set autoDraggerLength option to false
    2. 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; }
  • You can use the live option parameter and call mCustomScrollbar function normally without having to wait for the dynamic elements to be available in the DOM.

    	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":

    	live: "off"

    An alternative way to live is the liveSelector option parameter which you can define the matching set of elements (instead of the current selector) to add scrollbar(s) when available:

    	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 set autoExpandHorizontalScroll option parameter to true. For example:

    	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

        //your options...

    2. Using setTop option

  • 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 CSS direction: 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+)

        $(window).on("load resize",function(){
            if(window.matchMedia("(min-width: 640px)").matches){
                $("#your-element-id").mCustomScrollbar({ /* scrollbar options */ });

    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 */
        $(window).on("load resize",function(){
            var selector="#content-1", //your element(s) selector
                $(selector).mCustomScrollbar({ /* scrollbar options */ });
  • Yes but you’ll need extra markup to separate thead from tbody 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 which uses 2 separate tables (one for header and one for body) and 2 extra divs (one body wrapper and one overall wrapper).


Pages: 1 2 3 4


Post a comment

Comments pages: 1 80 81 82

  1. Sunil Kumar
    Posted on May 9, 2019 at 15:45 Permalink

    Hi I am trying to achieve a parallax effect in the website, from the section (A life of adventure), I have achieved the parallax effect from the library rellax.js, however looking to achieve the smooth scroll effect, can you guide me

    Sunil Kumar

  2. Nicky
    Posted on April 9, 2019 at 16:19 Permalink

    Looks like author stopped supporting project

  3. leomn
    Posted on March 25, 2019 at 10:30 Permalink

    In JS code file, I prepare a scroll container: $scrollWrapper and a button: $scroll , and set the scrollbar invisible and disabled mouseWheel to scroll the container,because the container is suposed to scroll via other actions.Then when the code is writtend like:
    function scroll(){ $scrollWrapper.mCustomScrollbar('scrollTo','right'); } scroll();
    the container scrolls,but
    function scroll(){ $scrollWrapper.mCustomScrollbar('scrollTo','right'); } $;
    it doesn’t.
    Can you help me to figure it out?

  4. Jone Manuilov
    Posted on March 21, 2019 at 11:36 Permalink

    Can I make horizontal block scroll by holding the mouse button, as to drag the block contents with the mouse

  5. Dario de Judicibus
    Posted on February 27, 2019 at 14:36 Permalink

    Very nice plugin but in the latest version of Chrome and Firefox there are several problems like this that prevent using the plugin:

    Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See

  6. saisudhakar
    Posted on February 14, 2019 at 09:25 Permalink

    I am very thankful to you for this plugin. I’ve an issue in my site . The problem is when i append li to ul each is not working properly.

    advanced:{ updateOnSelectorChange: “ul li” }

    Please help me to resolve update scrollbar.

    Thanks in advance for your help.

  7. Kris
    Posted on January 26, 2019 at 05:51 Permalink

    Is there any way to have the dark-3 scrollbar theme outside of a container div instead of inside?

  8. Camille
    Posted on January 24, 2019 at 11:37 Permalink


    Thank you for your plugin!

    I’ve an erratic behavior: the scroll bar switch between show and hide indefinitly.
    It seems related to the switch between those 2 CSS rules:
    .mCSB_inside > .mCSB_container { margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; }

    Do you already have this issue?

    Thank a lot for your help.


  9. Mehdi
    Posted on January 13, 2019 at 20:01 Permalink

    Hello, thanks for this great job! It is very flexible and would have solution for most cases.
    I used it in a website as :
    In homepage, at second section, I put it for wrapper contains pictures.
    While page width going to be small, it starts to work as well.
    But my question is for mobile devices.
    In mobile device, when scrollbar is on top of wrapper, body does not scroll to top.
    How do I fix this?
    Thanks again

  10. Deepika
    Posted on January 6, 2019 at 08:11 Permalink

    I have used this with autocomplete but scroll is not working with up and down keys.

  11. Andy
    Posted on December 7, 2018 at 02:45 Permalink

    Hello, I really like the scroll, it works fine on my environment but I got one question.

    My page not workink the link:

    Index.html page link:
    <a href="bio.html#subpage">Subpage</a>


    <script type="text/javascript"> (function($){ var hash=window.location.hash(#subpage), href=window.location.href.replace(/#.*$/,""); $(document).ready(function(){ //prevent browser jump to hash/id if(hash){ $(window).scrollTop(0).scrollLeft(0); if(window.history && window.history.pushState){ window.history.pushState("","",href); }else{ window.location.href=href; } } }); $(window).load(function(){ //call plugin to your element (e.g. .content) $(".content").mCustomScrollbar(); //scroll to location hash if(hash){ var target=$(hash).parents(".mCustomScrollbar"); if(target.length){ target.mCustomScrollbar("scrollTo",hash); } } }); })(jQuery); </script>

    Sorry, but I dont understand…
    Can you please help?


  12. Vlad
    Posted on November 7, 2018 at 22:12 Permalink

    How hide address bar in android browsers when scrolling like scroll by default?

  13. ayr
    Posted on October 31, 2018 at 20:20 Permalink

    How can I dynamically change the axis? I tried an if statement and recalled the plugin within the if statement but it didn’t work.

  14. Lee Kwang Dell
    Posted on October 27, 2018 at 07:42 Permalink

    how i can get the position of div# in myCustomscroll

  15. Owaiz Yusufi
    Posted on October 25, 2018 at 07:25 Permalink

    Does it works with jquery 3.3.1?

  16. Renat
    Posted on October 23, 2018 at 16:57 Permalink


    I have created container with popup inside it that can be snown (block) /hidden (none).
    Container is “.mCustomScrollBar”
    Popup has position: absolute. Popup height is greater than container height.
    When popup get’s visble then it is truncated by container.
    I tried “advanced : { updateOnContentResize : true}” but no luck.


    • Andre
      Posted on November 11, 2018 at 02:46 Permalink

      I have the same problem.

  17. John
    Posted on October 12, 2018 at 22:49 Permalink

    Hello Malihu,

    Excellent plugin you created, Thanks.

    Just would like to know how to stop it from calculating the margin top off screen with the minus sign, even though
    in my configuration setTop is set to zero (0).

    <div id="mCSB_1_container" class="mCSB_container" style=" position: relative; top: -960px; left: 0px;" dir="ltr"> <div id="mCSB_1_container" class="mCSB_container" style="position: relative; top: -853px; left: 0px;" dir="ltr"></div>

  18. Truth to be told
    Posted on October 10, 2018 at 07:16 Permalink

    This project seems to be dead and contains many problems. Last time GitHub repository have been updated over 2 years ago. Add to that 358 open issues for simple scroll is way too much.

    I recommend to look for better alternatives and there are plenty of them. Malihu-custom-scrollbar was hard to use, heavy and buggy.


    • Matt
      Posted on December 19, 2018 at 00:25 Permalink

      This plugin still works, and quite well actually. You probably don’t know what you’re doing is all.

      • Marianne
        Posted on April 25, 2019 at 18:34 Permalink

        The plugin works very well on all browsers, has very good documentation, themes … unlike other similar functionality plugins that are a somewhat struggle.

  19. Davidth
    Posted on October 9, 2018 at 14:15 Permalink

    it doesn’t work for me

  20. Nik
    Posted on October 9, 2018 at 03:11 Permalink

    Hello. It seems to me that search functionality doesn’t work. I press Ctrl+F in any browser and try to find a word – nothing happens. The plugin doesn’t scroll to the position of the found text. How can I fix this issue? Thanks

  21. Sunil
    Posted on September 2, 2018 at 14:51 Permalink

    Hello ,

    how to set default position bottom in below line


    { axis: ‘y’,theme: ’rounded-dark’}

  22. Yvan COYAUD
    Posted on August 10, 2018 at 10:40 Permalink

    Hello everybody
    When I include the malihu library (version 3.0.6) I have the following error:

    Uncaught ReferenceError: module is not defined at jquery.mousewheel.min.js: 8

    If I remove this library the error disappears …
    Does anyone have an idea to correct this error?
    thank you for your answers

  23. Chen zhaoyang
    Posted on July 24, 2018 at 11:46 Permalink

    How does calling Ajax determine whether scrolling is up or down?

  24. Squall
    Posted on July 19, 2018 at 18:13 Permalink

    Can I make, for example, 2 horizontal scroll bars?

  25. Debashis
    Posted on July 14, 2018 at 11:15 Permalink

    I am trying to use it with ReactJS and Meteor and getting this error in the console.

    Uncaught ReferenceError: module is not defined
    at jquery.mCustomScrollbar.concat.min.js:2

  26. Pratheesh
    Posted on July 13, 2018 at 19:49 Permalink


    Is there a way I can sync scrolls of a div with another scroll in another.
    That is when I scroll the first one second one also scrolls


  27. Parth
    Posted on July 5, 2018 at 15:38 Permalink

    I have initially set the the height of my panel. Now on window resize, how do I update the size of my panel i.e. from 600 to 100?

    Here’s the config object:
    $scope.scrollbarConfig = {
    autoHideScrollbar: true,
    horizRailEnabled: false,
    theme: ‘light’,
    advanced: {
    updateOnContentResize: true
    setHeight: 600,
    scrollInertia: 0

  28. Viet Nam
    Posted on June 28, 2018 at 09:50 Permalink

    Issues conflict with scroll to zoom in/out “jQuery Cropper” inside “mCustomScrollbar”
    on desktop unable zoom out
    on mobile scroll is corrupt.


Comments pages: 1 80 81 82

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>