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 77 78 79

  1. Andreco Castillo
    Posted on March 10, 2017 at 18:26 Permalink

    It works for me whit content ajax.

    $vista = responseHTML;
    $(“#col_tareas”).mCustomScrollbar({theme: “minimal-dark”});


  2. Abbas Tahir
    Posted on March 10, 2017 at 15:55 Permalink


    I want to scale(1.value(1++)) an image using css on horizontal scroll.
    Please help.

    Abbas Tahir

  3. Vijith V Balakrishnan
    Posted on March 10, 2017 at 11:17 Permalink

    Very cool…:)

  4. ChuQ
    Posted on March 9, 2017 at 10:41 Permalink

    Hi. First, I would like to say thank you for your great plugin. As I am quite new to jQuery and javascript stuff…I would like to ask if I have created a dropdown list with 200 options with mCustomScrollBar… but currently I can only scroll a very little part of it instead of the full list… Can I hard code it so the scrollbar will follow my scroll to the top/bottom? Thank you so much again. Best regards!

  5. Biswajit Paul
    Posted on March 3, 2017 at 12:25 Permalink

    How to stop initializing mCustomScrollbar for a content have class mCustomScrollbar.

  6. Parkash Kumar
    Posted on March 2, 2017 at 14:44 Permalink

    Is there any option to show horizontal scrollbar scrolled to specific element on initialization?

  7. Amit
    Posted on March 1, 2017 at 19:42 Permalink

    I try to add or remove class on page scroll but it’s not working with the custom scroll bar plugging without the plug in its working fine

    Please help in this

    If possible please provide a Pencode example

  8. sunsunsun
    Posted on February 14, 2017 at 12:24 Permalink

    Hey there – great plugin. Is it possible to move (= “scroll”) the inner container via “translate” instead of “left/top”? I think this would greatly improve the performance on very large elements to scroll..

    • Math
      Posted on March 18, 2017 at 01:23 Permalink

      Hey did you find a way to move the content using translate instead of “left/top” with custom scrollbar ?

  9. joban91
    Posted on February 13, 2017 at 19:28 Permalink

    Is there any way to prevent the onScroll event from triggering until someone has let up off the dragger bar?

  10. Aman Chandra
    Posted on February 10, 2017 at 14:43 Permalink

    The plugin is not compatible with jquery 2.1.4.

  11. Ankush
    Posted on February 2, 2017 at 12:57 Permalink

    I observe flickering effect on IE browser. I’m using accordion within a max-height div with mCustomScrollBar. Wherever i open any accordion, scrollbar visible for 1 sec and invisible after that yet scrollbar is not required for this particular scenario. Please help. Thanks in advance.

  12. Filipi
    Posted on January 25, 2017 at 02:19 Permalink

    Is it possible colobox with nested?

  13. paulo
    Posted on January 24, 2017 at 18:13 Permalink

    Hey, there is a way to disable the scrollbar if im in a mobile? thanks

  14. sanjay
    Posted on January 24, 2017 at 07:37 Permalink

    We are using malihu custom scrollbar and facing an issue.
    I want to use infinite scrolling for my appliction. I don’t know how to use that callbacks. please help me out.

  15. Carlos
    Posted on January 22, 2017 at 21:50 Permalink

    Hi, is there a way to trigger the click and the double click event of an element in mobile (android, iOS)?, it works like a charm in desktop.

    Am i missing something?

    $(".class").mCustomScrollbar({ axis:"y", theme:"dark-3", scrollButtons:{ enable: true }, live:"on", advanced:{ updateOnContentResize: true, updateOnSelectorChange:true }, documentTouchScroll: false });


  16. Sofia
    Posted on January 16, 2017 at 15:08 Permalink

    Hi! Inside my scroll there is ul. How shoud I put the element (by clicking it) in the center of scroll?

    • Parkash Kumar
      Posted on March 2, 2017 at 14:46 Permalink

      This is exactly, what I need! In other words, it is said to be center locked horizontal scroll.

  17. Andrew
    Posted on January 16, 2017 at 15:02 Permalink

    Hi! Can I center scroll element, on click them?

  18. James
    Posted on January 10, 2017 at 20:56 Permalink

    Hi there – is it possible to offset the top position of the scrollbar within the function rather than modifying the CSS file?

  19. MJB
    Posted on December 18, 2016 at 05:28 Permalink

    Is it possible to dynamically update the snapAmount/scrollAmount value based on an elements updated width/height if the browser is resized.


    var amount = Math.max.apply(Math,$(“#content-1 li”).map(function(){return $(this).outerHeight(true);}).get());

    How do you pass the updated value to the scrollbar on resize?

  20. Diwakar Singh
    Posted on December 14, 2016 at 12:12 Permalink


    I am trying to implement this scrollbar on a textarea. Does this plugin work on a textarea component.

    Diwakar Singh

  21. Guy
    Posted on December 8, 2016 at 18:08 Permalink

    Question; I’ve the scroll bar on a window which has multiple custom select options and I want to deactivate just the mouse wheel when I hover.

    Now it’s plain to get to the exact event but I am not sure about the syntax required to do just that.
    $(‘.widgetSettingContent’).mCustomScrollbar(mouseWheel:{ enable: ‘false’ });?

    I’m pretty sure I’m mistaken, I’d be happy if anyone was kind enough to correct me.

  22. Nicolas
    Posted on December 3, 2016 at 21:16 Permalink

    How would you approach this issue:
    I have a list of cards whose height is not fixed. Because they contain flex elements, when their width is reduced, their height also decreases.
    When using your scrollbar against this list, this produces a weird flickering issue when dynamically resizing the height list. At first the scrollbar is not visible. Then, at some point, the scrollbar needs to be displayed. When it appears, the width of the list decreases by the width of the scrollbar. This makes all the cards also reduce their height, which, you guess, makes the scrollbar non needed. So it disappears. So the cards expand, and so on, and so on, until I reduce the height of the list enough so that the scrollbar is always needed.
    How would you fix that? Thanks.

  23. Josh
    Posted on December 2, 2016 at 13:18 Permalink

    The scroll to works great, but it’s often annoying to “scroll into view” when the element is already in view. It would be great to be able to check whether an element within the mCustomScrollbar is visible before calling scrollTo. This could be done either with a .visible method like this (which method might have other useful use cases) or more specifically, passing an option to scrollTo like “onlyIfNotVisible”: true

  24. Josh
    Posted on November 28, 2016 at 20:56 Permalink

    When I hide the scrollbar using CSS display: none; on a parent element and then remove that CSS, the scroll bar forgets the position it was scrolled to and resets itself back to the top. Is there anyway to maintain the scroll position between hide/shows?

  25. Kumar Gaurav
    Posted on November 28, 2016 at 10:13 Permalink

    We are using malihu custom scrollbar and facing an issue.
    If we click on the Dragger Rail of the custom scrollbar,then the container goes to top:position -2000 or something like that.And the content is invisible. However it works fine on dragging the srcollbar. On clicking the dragger rail, the behaviour is somewhat weird as at times the content disappears due to wrong calculation of the top position.Can you please suggest a solution? The content and the container is created dynamically everytime so we are destroying and re-creating custom scrollbar and passing the height of container everytime.

    Steps to Reproduce:
    We are using malihu custom scrollbar on interactive map. Just click on the map icon on top left corner and a google map will open .If you select one of the office locations i.e map pins, a right hand side panel will open.
    In the right hand panel,if we click in the right hand area
    (around the scroll bar, but not on the scroll bar i.e dragger rail),it makes the office text/details disappear. It reappears if you scroll up/down. Just try clicking randomly around this area.


Comments pages: 1 77 78 79

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>