web design

jQuery custom content scroller

jQuery custom content scroller

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.0.4 (Changelog)

Upgrade notice

When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files.

Version 3 is backwards compatible but it’s also a a huge overhaul. One significant change is that you don’t need to call the update method manually (the script does it automatically).

For more info see changelog.

Version 2.x is still maintained and updated here.

Configuration     Methods

How to use it

Get started by downloading the archive which contains the plugin files (and a pretty large amount of HTML examples and demos). Extract and upload jquery.mCustomScrollbar.concat.min.js, jquery.mCustomScrollbar.css and mCSB_buttons.png to your web server.

Include jquery.mCustomScrollbar.css in the head tag your html document

<link rel="stylesheet" href="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 (usually recommended for better performance)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

After files inclusion, add the class mCustomScrollbar to any element you want to add custom scrollbar(s)

Alternatively, call mCustomScrollbar function on the element selector you want to add the scrollbar(s)


The example above adds scrollbars to elements with class name content

In order for the scrollbar to appear, the element(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.

By default the script applies the vertical scrollbar. To add a horizontal or 2-axis scrollbars, invoke mCustomScrollbar function with the axis option set to “x” or “yx” respectively

    axis:"x" // horizontal scrollbar

    axis:"yx" // vertical and horizontal scrollbar

To change the appearance of the scrollbar, set the theme option parameter to any of the ready-to-use themes available in jquery.mCustomScrollbar.css


Loading scripts from Github

Instead of hosting the plugin files on your web server, you can load each one directly from Github. You can choose to always load the latest plugin version or a specific one

<!-- latest -->
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css" />
<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

<!-- v3.0.0 -->
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css" />
<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script>

Plugin files in detail

jquery.mCustomScrollbar.css contains the basic styling of the custom scrollbar and the ready-to-use themes. It should normally be included in the head tag of your html (typically before any script tags). If you wish to reduce http requests and/or have all your website stylesheet in a single file, you should move scrollbars styling in your main CSS document.

mCSB_buttons.png contains all the button arrows (up, down, left and right) as image sprites for all scrollbar themes. The plugin archive contains the PSD source (source-files/mCSB_buttons.psd) so you can change them or add your own.

jquery.mCustomScrollbar.concat.min.js is the main plugin file which contains the custom scrollbar script as well as dependencies (e.g. jQuery mousewheel plugin), concatenated and minified. This file should be included after jQuery library inclusion.

mCustomScrollbar function

Call mCustomScrollbar function after jQuery and jquery.mCustomScrollbar.concat.min.js script tags. The HTML should look something like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

The code is wrapped in (function($){ ... })(jQuery);. This ensures no conflict between jQuery and other libraries using $ shortcut (see Using jQuery with Other Libraries for more info). The plugin function is called on window load ($(window).load()) so it executes after all page elements are fully loaded. To call mCustomScrollbar on document ready (code executes when the DOM is ready)


You can change the function selector (".content") to anything you want (an element id, class name, js variable etc.) – see CSS selectors. For instance, if you want custom scrollbars to apply on the element with id content-1, you simply do:


You may also have multiple selectors by inserting comma separated values


The above code adds custom scrollbars to a)every element with class name content and b)the element with id content-1.

Additionally, you may want to call mCustomScrollbar multiple times within a page in order to set different options (configuration and option parameters explained below) for each selector



mCustomScrollbar function option parameters

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). Usage example: setTop: "-100px".
setLeft: 0
Set the initial css left property of content, accepts string values (css left position). Usage example: setLeft: "-100px".
axis: string
Define content’s scrolling axis (the type of scrollbars added to the element). There are 3 available values: “y”, “x” and “yx”. Set axis: "y" (default) for vertical scrollbar and axis: "x" for horizontal scrollbar. By setting axis: "yx", both vertical and horizontal scrollbars will be applied if necessary.
scrollbarPosition: string
Set the position of scrollbar relative to content. There are 2 available values: “inside” and “outside”. Setting scrollbarPosition: "inside" (default) makes scrollbar appear inside the scrolling area. Setting scrollbarPosition: "outside" makes scrollbar appear out of the scrolling area. Note that setting the value to “outside” requires your element (or parent elements) to have CSS position: relative (otherwise the scrollbar will be positioned in relation to the whole page).
scrollInertia: integer
Set the amount of scrolling momentum as duration in milliseconds. Higher value means longer scrolling momentum which translates to smoother/more progressive scrolling animation stopping. Set to 0 to disable.
autoDraggerLength: boolean
Enable or disable auto-adjusting scrollbar(s) dragger length in relation to scrolling amount (same bahavior with browser’s native scrollbar). Set autoDraggerLength: false when you want your scrollbar to have a fixed size (e.g. a cycle).
autoHideScrollbar: boolean
Enable or disable auto-hiding the scrollbar(s). Setting autoHideScrollbar: true will hide the scrollbar(s) when scrolling is idle and/or cursor is out of the scrolling area.
autoExpandScrollbar: boolean
Enable or disable auto-expanding the scrollbar(s) when cursor is over or dragging the scrollbar.
alwaysShowScrollbar: integer
Always keep scrollbar(s) visible, even when there’s nothing to scroll. Set alwaysShowScrollbar: 1 to keep only dragger rail visible and alwaysShowScrollbar: 2 to keep all scrollbar components (dragger, rail, buttons etc.) visible. Set to 0 (default) to disable.
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 table rows, images, slides etc. Note that your elements must be of equal width or height in order for this to work properly.
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 title.
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. Set axis: "y" (default) for vertical or axis: "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 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 is ["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. There are 2 available values: “stepless” and “stepped”. Setting scrollType: "stepless" (default) means that holding/pressing the button will continuously scroll the content. Setting scrollType: "stepped" means that each button click will scroll content a certain amount (defined in scrollAmount option above).
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. There are 2 available values: “stepless” and “stepped”. Setting scrollType: "stepless" (default) means that pressing the arrow key will continuously scroll the content. Setting scrollType: "stepped" means that each key release will scroll content a certain amount (defined in scrollAmount option above).
contentTouchScroll: integer
Enable or disable content touch-swipe scrolling for touch-enabled devices. To completely disable, set contentTouchScroll: false. Integer values define the axis-specific minimum amount required for scrolling momentum (default value is 25).
advanced:{ autoExpandHorizontalScroll: boolean }
Auto-expand content horizontally (for “x” or “yx” axis). If set to true, content will expand horizontally to accomodate any floated/inline-block elements.
advanced:{ autoScrollOnFocus: string }
Set the list of elements 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, set autoScrollOnFocus: false. Default value is "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 be true (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. The value should be true (default) when your content contains images.
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, setting updateOnSelectorChange: "ul li" will update scrollbars each time list-items inside the element are changed. Setting the value to true, will update scrollbars each time any element is changed. To disable (default) set to false.
theme: string
Set the scrollbar theme (plugin’s CSS contains ready-to-use themes). The default theme is "light"
    onScrollStart: function(){}
A function (or custom code) to call when scrolling starts (callbacks demo). Example:
    console.log("scrolling started...");

Set to false (default) to disable.
    onScroll: function(){}
A function (or custom code) to call when scrolling is completed (callbacks demo). Example:
    console.log("content scrolled...");

Set to false (default) to disable.
    onTotalScroll: function(){}
A function (or custom code) to call when scrolling is completed and content is scrolled all the way to the end (bottom/right) (callbacks demo). Example:
    console.log("scrolled to end of content.");

Set to false (default) to disable.
    onTotalScrollBack: function(){}
A function (or custom code) to call when scrolling is completed and content is scrolled back to the beginning (top/left) (callbacks demo). Example:
    console.log("scrolled back to the beginning of content.");

Set to false (default) to disable.
    onTotalScrollOffset: Integer
Set an offset for the onTotalScroll option. For example, setting onTotalScrollOffset: 100 will trigger the onTotalScroll callback 100 pixels before the end of scrolling is reached.
    onTotalScrollBackOffset: Integer
Set an offset for the onTotalScrollBack option. For example, setting onTotalScrollBackOffset: 100 will trigger the onTotalScrollBack callback 100 pixels before the beginning of scrolling is reached.
    whileScrolling: function(){}
A function (or custom code) to call while scrolling is active (callbacks demo). Example:

Set to false (default) to disable.
    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. Set alwaysTriggerOffsets: false when you need to trigger onTotalScroll and onTotalScrollBack callbacks once, each time scroll end or beginning is reached.
    onOverflowY: function(){}
A function (or custom code) to call when content becomes long enough and vertical scrollbar is added. Example:
    console.log("Vertical scrolling required");

Set to false (default) to disable.
    onOverflowX: function(){}
A function (or custom code) to call when content becomes wide enough and horizontal scrollbar is added. Example:
    console.log("Horizontal scrolling required");

Set to false (default) to disable.
    onOverflowYNone: function(){}
A function (or custom code) to call when content becomes short enough and vertical scrollbar is removed. Example:
    console.log("Vertical scrolling is not required");

Set to false (default) to disable.
    onOverflowXNone: function(){}
A function (or custom code) to call when content becomes narrow enough and horizontal scrollbar is removed. Example:
    console.log("Horizontal scrolling is not required");

Set to false (default) to disable.
live: boolean, string
Enable or disable applying scrollbar(s) on all elements matching the current selector, now and in the future. Set live: 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 an link). If you need at any time to disable or enable the live option, set live: "off" and "on" respectively. You can also tell the script to disable live option after the first invocation by setting live: "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


Usage $(selector).mCustomScrollbar("update");

Call the update method to manually update existing scrollbars to accomodate 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.


Usage $(selector).mCustomScrollbar("scrollTo",position);

Call the scrollTo method to programmatically scroll the content to the position parameter. Position parameter can be a string (e.g. "#element-id", "bottom", "left" etc.), an integer indicating a number of pixels to scroll-to (e.g. 100), an array for y/x axis (e.g. [100,100]), a js/jQuery object, a function etc.


Scroll to the last element within your content


Scroll to element with id el-1

var elID="#el-1";

scrollTo parameter

Scrolls to element position, string value can be any unique id, class etc.
Scrolls to top (vertical scrollbars)
Scrolls to bottom (vertical scrollbars)
Scrolls to left-end (horizontal scrollbars)
Scrolls to right-end (horizontal scrollbars)
Scrolls to first element’s position within the content
Scrolls to last element’s position within the content
Scrolls to number of pixels, e.g. $(selector).mCustomScrollbar("scrollTo",200);

Method option parameters

scrollInertia: Integer
Scroll-to animation speed, value in milliseconds. Example:
moveDragger: Boolean
Scroll scrollbar dragger (instead of content) to a number of pixels, values: true, false. Example:
callbacks: Boolean
Trigger user defined callbacks after scroll-to completes, values: true, false. Example:
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:


Usage $(selector).mCustomScrollbar("stop");

Stops running scrolling animations. Usefull when you wish to interupt a previously scrollTo call.


Usage $(selector).mCustomScrollbar("disable");

Calling mCustomScrollbar’s disable method will temporarily disable the scrollbar. Disabled scrollbars can be re-enable by calling the update method.

Method parameters

Disable custom scrollbar and reset content’s scrolling position.

Example of using disable method


Usage $(selector).mCustomScrollbar("destroy");

Calling destroy method will completely remove the custom scrollbar and return the element to its original state.

Example of using destroy method

Styling the scrollbars

Style your scrollbar(s) using the jquery.mCustomScrollbar.css file which contains the default scrollbar style plus a number of ready-to-use themes. You can directly change the default styling or you can keep it and add additional styles for each scrollbar.

You can have separate styling for each of your scrollbars on the same page, either by giving your content blocks different class names or ids or simply by targeting them in your css like this:

.mCSB_1_scrollbar .mCSB_dragger .mCSB_dragger_bar{
    /* 1st scrollbar dragger style... */
.mCSB_2_scrollbar .mCSB_dragger .mCSB_dragger_bar{
    /* 2nd scrollbar dragger style... */
.mCSB_3_scrollbar .mCSB_dragger .mCSB_dragger_bar{
    /* 3rd scrollbar dragger style... */

…and so on. Each content block in your document that has custom scrollbars gets automatically an additional unique class in the form of _mCS_+index number (e.g. _mCS_1) based on its index number within the DOM. Also, an additional id in the form of mCSB_+index number is generated for each .mCustomScrollBox div. This way you can easily target and style any scrollbar using its parent class name or id.

Custom scrollbar layout

User-defined callbacks

You can trigger your own js function(s) by calling them inside mCustomScrollbar callbacks option parameter


function myCustomFn(el){

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 starts
  • whileScrolling – triggers while scroll event is running
  • onScroll – triggers when a scroll event completes
  • onTotalScroll – triggers when content has scrolled all the way to bottom or right
  • onTotalScrollBack – 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. For example, the following will trigger the callback function when content has scrolled to bottom minus 100 pixels

            console.log("scrolled to bottom");

Returning values

The script returns a number of values and objects related to scrollbar

  • this – the original element containing the scrollbar(s)
  • this.mcs.content – the original content wrapper as jquery object
  • this.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 percentage
  • this.mcs.leftPct – content horizontal scrolling percentage
  • this.mcs.direction – content’s scrolling direction (y or x)



function myCustomFn(el){
    var msg="Content inside the element with id '"+el.attr("id")+"' has scrolled "+mcs.topPct+"%";

Plugin dependencies & requirements


This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.

Pages: 1 2


Post a comment

Comments pages: 1 14 15 16

  1. Matjaz Jurecic
    Posted on September 19, 2014 at 13:16 Permalink

    Is there a callback for when the library is initialised or when rerendering is done?

  2. heather
    Posted on September 19, 2014 at 00:41 Permalink

    so hi… great plugin… do love it and it works fine with fancy box which another did not. however, i am having a little problem. i have images in a scrolling div. the div has 100% height and 100% width. the image in the div has max-width and auto height so that when the containing div shrinks with the viewport, the image will size proportionately keeping it’s aspect ratio. the problem occurs when the image is just about small enough to clear the y-overflow and a little beyond that. at that point, the scrollbar starts to flicker in and out and won’t stop until you resize the window.

    the site is here: http:www.imagesrising.com/ir2013 go to portfolio and click on a long-thin sample and resize the window horizontally.

    i could fix this by having the scrollbars always showing, but i would rather not do that. any suggestions?

    thanks so much!

    • malihu
      Posted on September 19, 2014 at 01:21 Permalink

      This happens because by default, the scrollbar position is considered relative to content. This means that the actual content and scrollbar are “separated” by a fixed margin (see CSS line 54), which is removed (see CSS line 56) when scrollbar is not visible.

      You can either change the CSS (e.g. remove one of those 2 rules and/or add an opposite margin to center the image), or set the scrollbarPosition option parameter to “outside”:
      $(selector).mCustomScrollbar({ scrollbarPosition: "outside" });

      Since you’ll still need to somehow visually accommodate the scrollbar (and not just let it overlap the image), I suggest to simply edit plugin’s CSS and remove:
      margin-right: 0;
      from line 56, and add:
      margin-left: 20px;
      in line 54.

      • heather
        Posted on September 19, 2014 at 03:09 Permalink

        thank you so much for your prompt reply!!

  3. Rom
    Posted on September 18, 2014 at 18:17 Permalink


    How to change size(height) of draggerBar ?
    It’s too big when the content is too small

    .mCSB_dragger_bar{height:Xpx;} doesn’t work


    • malihu
      Posted on September 18, 2014 at 19:41 Permalink

      By default, the scrollbar height changes the same way browser’s native scrollbar does (e.g. when content is too short, the scrollbar height is near 100%).

      To disable auto-adjusting scrollbar dragger length (the draggable element is the .mCSB_dragger), you need to set autoDraggerLength to false:
      $(selector).mCustomScrollbar({ autoDraggerLength: false });

      This will make the scrollbar have a fixed height which you can change in CSS (line 103):
      .mCSB_scrollTools .mCSB_dragger{ height: 30px; }

  4. MD
    Posted on September 16, 2014 at 18:48 Permalink

    Hi, I want to pass the mousewheel event from an element to the custom scrollbar container.

    I tried something like this, but this is not working:

    $el.on(‘mousewheel DOMMouseScroll’, function (event) {
    var newEvent = $.Event(‘mousewheel’, {
    deltaY: event.deltaY,
    deltaFactor: event.deltaFactor,
    deltaX: event.deltaX,
    target: $scrollbox[0]


    Using $container.mCustomScrollbar(“scrollTo”, x) is not helping, I want to have a smooth scroll.

  5. Mahadevan
    Posted on September 13, 2014 at 23:37 Permalink


    I have a query on horizontal scroll can I use div blocks instead of image for horizontal scroll.

    If you have any example kindly provide me the same.

    Because I tried it was not working.

    Eagerly waiting for your reply


  6. Noel S
    Posted on September 12, 2014 at 09:48 Permalink

    A great plugin. thanks for the same :)..

    Just a small question. I didnt see any top or bottom arrows in the scroll bar. Tried changing some values in mCSB_buttonUp and buttondown but just couldnt get it. Keeping the scroll in the container with a fixed position has any effects?? Thanks in Advance

    • Noel S
      Posted on September 12, 2014 at 10:21 Permalink

      I being a newb in a hurry overlooked some properties given above… Going through it in detail again(this time slowly) helped me out here…. Thanks for the detailed explanations dude…… Working like a charm,…. :)

  7. Luis R Pacheco
    Posted on September 11, 2014 at 20:29 Permalink

    Hello, I have a little problem with this, in this site http://optisnte.mx/snte-relaciones-internacionales/
    (sorry it´s in Spanish).
    If you click ” Comunicación Internacional” you will see 3 tabs, they are set to work with this plugin, but for some reason, depending on the size of the screen it works on different tabs, let me try to explain, in the first tab it works on 15″ and bigger screens, and the second tab doesn´t. If I make the browser smaller then they switch, the first one doesn´t work and the second one does, and I can´t seem to find the issue.
    Any help would be greatly appreciated thank you

    • malihu
      Posted on September 12, 2014 at 02:19 Permalink


      It seems you’re using an older version of the plugin (2.x), meaning that the scrollbar needs to be updated each time you change/click a tab.

      This can be done in 2 ways:

      1. Call the update method manually in your script where you change the tabs, for example:

      2. Enable updateOnContentResize option parameter once when you initialize the scrollbar(s), e.g.:
      $(selector).mCustomScrollbar({ advanced:{ updateOnContentResize: true } });

  8. Organic
    Posted on September 10, 2014 at 13:40 Permalink

    autoHideScrollbar: false doesn’t work with theme: "minimal"

    • malihu
      Posted on September 10, 2014 at 18:25 Permalink

      Indeed. Some ready-to-use themes are “special” in the sense that they overwrite some options in order to function/appear as they do. “minimal” is such a theme as it’s made to look/feel like mobile OS native scrollbars do.

      You can always copy “minimal” theme’s CSS and make your own clone if you want.

      • Organic
        Posted on September 16, 2014 at 15:01 Permalink

        Fair enough.

        How about being able to set autoHideScrollbar:true only after first interaction?

        I don’t want users to miss the scrollbar when they first see the content but I’d like to hide it after they’ve used it once.

        Thank you.

        • malihu
          Posted on September 16, 2014 at 16:52 Permalink

          You can use the onScroll callback like this:
          $(selector).mCustomScrollbar({ theme:"minimal-dark", callbacks:{ onScroll:function(){ $(this).find(".mCSB_draggerContainer").css("display","none"); } } });

          • Organic
            Posted on September 16, 2014 at 17:01 Permalink

            Thanks for the swift reply but that hides the scrollbar as you scroll for the first time!

            I’m sorry for not making it clear, I meant that I want the scrollbar behaviour to change to the autoHide behaviour after scrolling once and leaving the scrolling area.

            I was hoping there was a way of setting the property autoHideScrollbar: true after instantiation of the scrollbar.

            Note: I’m now using “light-3″ as minimal was too subtle for our needs.

            Thank you.

        • malihu
          Posted on September 16, 2014 at 17:30 Permalink

          In this case you can do:
          var once=0; $(selector).mCustomScrollbar({ theme:"light-3", callbacks:{ onScroll:function(){ if(!once){ $(this) .addClass("mCS-autoHide") .data("mCS").opt.autoHideScrollbar=true; once=1; } } } });

          • organic
            Posted on September 16, 2014 at 17:42 Permalink

            That did it, I only to fix a JS error by changing if(!once){ to if(once == undefined){

            Thanks a bunch for your help : )

      • Organic
        Posted on September 16, 2014 at 16:53 Permalink

        Btw, In the following setup:

        scrollButtons:{ enable: true, scrollAmount: 300, scrollType: "stepped"}

        scrollAmount appears to be ignored and snapAmount appears to be used instead for the stepped type of scrollButtons.

  9. nilesh
    Posted on September 10, 2014 at 11:01 Permalink

    how can we apply this style to whole body of website…i want apply the same scrollbar style to all scrollbar in my website…how to do that? plz help

    • malihu
      Posted on September 10, 2014 at 12:08 Permalink

      Add the class mCustomScrollbar to any element you want to add the scrollbar (including the body tag). This will apply the scrollbar with the default options.

      If you want to customize its settings, call mCustomScrollbar function on the element selector you want to add the scrollbar. For example, give your elements (including the body tag) the class my-custom-scrollbar and add/change your options via a script like:

      <script> (function($){ $(window).load(function(){ $(".my-custom-scrollbar").mCustomScrollbar({ theme:"dark" }); }); })(jQuery); </script>

  10. Alpio
    Posted on September 9, 2014 at 20:32 Permalink

    Hi, i have this on my backbone view and it does not work all the times. It should catch the id of the element and then navigate to that pont. Sometimes it does, but sometimes i doesnt. Could you help me? My PM keep saying its the plugin fault.

    //this is the BB event

    events: {
    ‘click ol a': ‘setScrollHash’,

    //This are the BB methods

    setScrollHash: function (e) {

    scrollTo: function (hash) {
    if(hash) {
    this.body.mCustomScrollbar(‘scrollTo’, hash);
    } else {
    this.body.mCustomScrollbar(‘scrollTo’, ‘top’);

    //This is the HTML

    1.- Intro

    1.- Intro

    • malihu
      Posted on September 10, 2014 at 12:18 Permalink

      My guess is that the script (sometimes) stops the scroll-to action as it hasn’t finish updating the scrollbar according to (new) content.

      I don’t know how you load your content or when the scrollbar is applied (on window load? on DOM ready?) but a solution might be to add a small timeout (delay) to your scrollTo method.

      If you’re using the latest version (3.0.4) you can change scrollTo method timeout via the timeout option, e.g.:
      $(selector).mCustomScrollbar('scrollTo', hash,{timeout:150});

  11. Jose Romero
    Posted on September 9, 2014 at 14:49 Permalink

    Hi there,

    Congrats for the plugin, you really did a nice job.

    I just have a quick question. I used this on a webapp for touch screens, and the scroll works in all the container by sliding fingers up or down (on touch screens), and my question is for non touch screens, which have to click in the scrollbar to scroll the container, is there any way to click and slide in any part of the container and do the same behaviour (scroll) as if you were clicking in the scroll bar?

    Many thanks for your time, and hopefully you could help me to sort it out :)



    • malihu
      Posted on September 10, 2014 at 12:31 Permalink

      It would need a modified script. This behavior would of course prevent users from selecting text, fill forms etc. On non-touch screens, click’n’drag content with a cursor in order to scroll it would feel counter-productive or just awkward.

      I probably have a script modified to do this but I haven’t tested it to see if/how it would work along with actual touch-screens. Let me know if you want to send it to you.

      • Jose Romero
        Posted on September 10, 2014 at 12:36 Permalink

        Hi malihu,

        Thanks for your reply. Yes I would like if you can send it to me.

        Actually, The container always content text but I added the rules in css in order to do not allow to select text, so people can’t copy it.

        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;

        Looking forward to hearing from you,


  12. ลงประกาศฟรี
    Posted on September 8, 2014 at 13:01 Permalink

    Can we add previous and next button like this?
    or do you have any suggestion?

    $(“.previous”).click(function(e) {
    return false;

    $(“.next”).click(function(e) {
    return false;

    • malihu
      Posted on September 8, 2014 at 13:59 Permalink

      Yes this would work

  13. Arthur M.
    Posted on September 4, 2014 at 17:23 Permalink

    It’s the greatest plugin that I found!


  14. Lucaraid
    Posted on September 4, 2014 at 15:55 Permalink

    I did a chat which refreshes every second. I would like to have the position of the scrollbar. If the scrollbar is not on bottom i don’t wanna scroll the scrollbar to bottom. Otherwise i want. Is this possible to get the position?

    • Lucaraid
      Posted on September 4, 2014 at 17:03 Permalink

      And do you know how to start at bottom. That means the start position of the scrollbar is the bottom.
      :D thanks for your help

      • malihu
        Posted on September 7, 2014 at 22:41 Permalink

        To start at the bottom you can either use the setTop option:
        $(selector).mCustomScrollbar({ setTop:"-9999px" });
        or the scrollTo right after plugin initialization:

    • Lucaraid
      Posted on September 6, 2014 at 16:46 Permalink

      malihu could you please help me?

    • malihu
      Posted on September 7, 2014 at 22:57 Permalink

      You can get content position via the mcs object by invoking for instance an empty onScroll callback:
      $(selector).mCustomScrollbar({ callbacks:{ onScroll:function(){} } });

      Then in your script(s) you can get the top position and test if it’s at the bottom like this:
      var positionPercentage=$(selector)[0].mcs.topPct; if(positionPercentage===100){ console.log("content scrolled all the way to the bottom"); }else{ console.log("content is not at the bottom"); }

      • Lucaraid
        Posted on September 8, 2014 at 14:41 Permalink

        Thank’s for your help.
        If I do not scroll to the bottom in my script, everything works great. But when the script scrolls to the bottom, the console always say you are at the bottom. I think it is because i call the ajax every second to refresh the chat…
        I might refresh the chat every 3 second. Then the users would have 3 seconds to scrollup..
        Is there any other way to get the scrollbar position..?

        Thank you very much!

        • malihu
          Posted on September 8, 2014 at 17:25 Permalink

          When you do the ajax call do you also scroll-to bottom in order to display the last message? For example:
          if(positionPercentage===100){ $(selector).mCustomScrollbar("scrollTo","bottom",{scrollInertia:0}); }

          • Lucaraid
            Posted on September 9, 2014 at 08:50 Permalink

            Of Course, i will only to scroll to bottom if the user does not scroll . Because it’s dumb if you scroll the user to bottom and he scrolls to top.

            And when I scroll to bottom every second with your plugin:
            There’s no time for the user to scroll up.

            I think i put now a checkbox on my site and when the checkbox is checked the div scrolls to bottom. Otherwise not.

            Thank you very much!

  15. Holger
    Posted on September 3, 2014 at 11:51 Permalink

    Thanks so much for this wonderful scroller!

    I have a little problem in the following situation:
    I have a and activate the scroller. Then I load via jquery .load new content to that div. After that just have the normal scrollbar. I tried to use .mCustomScrollbar(“update”) and also the live : “on” option with no result or errors. Where is the fault?

    • malihu
      Posted on September 3, 2014 at 20:35 Permalink

      When you have already initialize the scrollbar, you must load your new content inside the .mCSB_container div (instead of directly inside your element). For example:
      $(".content").mCustomScrollbar(); $(".content .mCSB_container").append( /* your content... */ )

      • Holger
        Posted on September 8, 2014 at 18:17 Permalink

        Thank you! Now it works perfect!

      • Matthias
        Posted on September 11, 2014 at 08:20 Permalink

        Hi Malihu,

        thanks for the nice scrollbar:
        I hope you can help me with my little problem:

        I added the scrollbar in my content in index.php.
        The box and container works but i can´t activate the sroll button up or down . is it possible that you can explain me how i have to do this ??

        In jquery.mCustumScrollbar.js i already set the button on true….
        but i didnt´t work.

        Thanks for your answer

        • malihu
          Posted on September 11, 2014 at 09:17 Permalink

          You enable scrolling buttons via the scrollButtons option like this:
          $(selector).mCustomScrollbar({ scrollButtons:{ enable: true } });

          If you already have this option set and the buttons don’t appear, make sure you have mCSB_buttons.png in plugin’s directory.

  16. Matjaz Jurecic
    Posted on September 3, 2014 at 11:40 Permalink

    Hi, great plugin, works great.

    Currently I have a problem with this example http://jsfiddle.net/mato75/ztLhpf2g/5/.

    I am using it with angularjs and with angular-vs-repeat. This plugin seems to work with scrolling of the browser, so how do I tell the browser that I am scrolling and the position, so that this library will update its values.

    • malihu
      Posted on September 3, 2014 at 21:30 Permalink

      You’ll need to use plugin’s callback options and get the scrolling position (among other values) from mcs object, e.g.:
      angular.element('#dd').mCustomScrollbar({ callbacks:{ whileScrolling:function(){ console.log(this.mcs.top); /* your function(s) here */ } } });

      See “User-defined callbacks” for more info on available callbacks and mcs object

  17. Mirko
    Posted on September 2, 2014 at 17:16 Permalink

    Hi, I am using your plugin and it works great.
    I have this problem: I have a ‘container’ div (initialized with the scrollbar plugin) with some content.
    I’d like to know if there is a way to know whether a DIV with a given id inside the ‘container’ is visible to the user (that is, inside the viewport) or not (based on the scrolling of the container).
    Is there a way to know how much the ‘container’ has been scrolled? I didn’t see it in the documentation, or maybe I missed something. Thank you

    • malihu
      Posted on September 2, 2014 at 20:57 Permalink


      You can do it by calling a custom function inside a plugin callback option. For example:
      $(selector).mCustomScrollbar({ callbacks:{ onScroll:function(){ if(isVisible("#id",this)){ //if #id is visible console.log("#id is visible"); //run your code } } } }); function isVisible(id,container){ var elem=$(id), scrollable=$(container).find(".mCSB_container"), pos=container.mcs.top+(elem.offset().top-scrollable.offset().top); return pos>=0 && pos<scrollable.parent().height()-elem.outerHeight(false); }

      The isVisible function above will return true only when #id is fully visible. To make it return true when #id is partially visible, change:
      return pos>=0 && pos<scrollable.parent().height()-elem.outerHeight(false);
      return pos>=-elem.outerHeight(false) && pos<scrollable.parent().height();

      • Mirko
        Posted on September 8, 2014 at 12:11 Permalink

        Cool works great thx :)

  18. Rick
    Posted on September 1, 2014 at 18:44 Permalink

    Awesome scroller – thanks for the effort you have put in!

    I have a problem – I am using the scroller around an ASPxCheckBoxList – When someone ticks an item I am calling an OnSelectedIndexChanged function in the code behind.

    This causes the scrollbar to return to the top of the list. Is there any way to stop this happening?

    Thank you.

  19. OPcode
    Posted on September 1, 2014 at 16:05 Permalink

    Hello again.

    While I was trying to implement the showing of the dragger rail only when the mouse is over it and when the user drags the dragger bar with the mouse (not when the user scrolls the content with the mouse wheel so onScrollStart and onScroll cannot be used) I’ve stumbled upon a problem.
    I’ve attached one mousedown-callback to the dragger bar element and one mouseup-callback to the document. In mousedown-callback I add the specific class to the scrollbar’s root element and in mouseup-callback I remove this class. So this way it is easy to style the rail when I need it. In Chrome and Firefox everything is fine. But in IE (11) none of the callbacks fire for some reason. I understand that this is most probably browser-specific thing but maybe there are stopImmediatePropagation functions out there (blocking only IE11) that can be removed? Or maybe there’s some workaround for my problem?

    • OPcode
      Posted on September 6, 2014 at 13:45 Permalink

      For those who encounters the same problem the culprit was jquery.mCustomScrollbar.js:1115. The thing is that that event handler first handles the ‘pointerdown’ event and e.preventDefault() in this case prevents the generation of ‘mousedown’ event.
      As of now the ‘pointerdown’ and ‘pointerup’ events are supported only by IE10/11 hence the problem was only observed in IE11 in my case.

  20. Nico
    Posted on August 31, 2014 at 22:21 Permalink

    I’m trying your plugin inside a panel in asp.net Ajax.

    With each refresh of the panel is called the code to initialize the scroolbar.

    Unfortunately, I found that trying it on IE after refresh everything becomes a little slow. It should be a little better in firefox and chrome but even here after a while it all becomes very slow.

    I’ve seen other examples you’ve done with ajax panels but I have not found evidence.

    I also saw in debug that at every refresh the mCSB_ + index number continues to increase.

    Maybe not good in this circumstance, or I’m wrong code to initialize the scrool properly.

    Can you give me some advice?

    Thanks and great job.

    • Nico
      Posted on September 1, 2014 at 19:26 Permalink

      Unsuccessfully tried $ (“. ViewThumbScrool”). MCustomScrollbar (“update”);

      • Nico
        Posted on September 1, 2014 at 19:46 Permalink

        Wow! I studied still is the option I’ve seen live: true.
        I’m trying to say I know you if I can solve.

        • Nico
          Posted on September 1, 2014 at 20:04 Permalink

          With the option “live: true” is performed correctly and every 500ms and the scroll bars are added correctly in IE but it is a disaster refresh after a few stops.

          It should be a little better in Firefox and Chrome but it all gets very very slow.


      • malihu
        Posted on September 1, 2014 at 21:11 Permalink

        Don’t know if this is a typo but the code is:

        This will update the scrollbar when content length has changed. In plugin version 3.x this is not really needed as the script calls the method automatically when a content change is detected.

        The live option is used when you want to add scrollbar(s) automatically on elements that do not exist in your page (yet).

        Destroy method might also help if you’re removing/adding elements. For example, you should first destroy the element and then add it again:
        $(".ViewThumbScrool").mCustomScrollbar("destroy"); $(".ViewThumbScrool").mCustomScrollbar();

        I can’t really help though unless I see your implementation live. If you could send me link or code I’d be able to understand how your app works and provide more help.

        • Nico
          Posted on September 2, 2014 at 10:58 Permalink

          The code for “update” as you said is a copying error.

          The live option works correctly, but practically IE crashes.

          I’ll see if I can send you an extract of code to replicate the problem.

          Thank you!

          • Lucaraid
            Posted on September 3, 2014 at 16:41 Permalink

            I have the same problem what do you mean with live: true?

  21. Marc
    Posted on August 31, 2014 at 19:09 Permalink

    Really nice!
    I will love to use it in my website but how can I install it in cargocollective?

  22. t0s
    Posted on August 30, 2014 at 19:37 Permalink


    Can I define callbacks after I used some methods?

    $('.content').mCustomScrollbar(“scrollTo”, "bottom"); $('.content').mCustomScrollbar({callbacks:{ onScroll: function() { console.log('scroll'); }});
    That code doesn’t work now.

    And another question: can I listening event of scroll appear, when i add content dynamicaly?

    Thank you!

    • malihu
      Posted on August 31, 2014 at 20:06 Permalink

      The callbacks are defined when you initialize the scrollbar. You should define them first and they’ll work fine:
      $('.content').mCustomScrollbar({callbacks:{ onScroll: function() { console.log("scroll"); }}); $('.content').mCustomScrollbar("scrollTo", "bottom");

  23. Sunil kumar
    Posted on August 30, 2014 at 17:29 Permalink

    hello sir,

    I have a reply button at bottom near scrollbar

    when I click on reply button a form shows and when I click to fill up field scrollbar automatically goest to top everytime.

    • malihu
      Posted on August 30, 2014 at 17:46 Permalink


      This can be caused by some CSS property missing (e.g. floated elements not cleared or elements needing position:relative). If you can’t find/fix the CSS, you can disable autoScrollOnFocus option by setting it to false, e.g.:
      $(".content").mCustomScrollbar({ advanced:{ autoScrollOnFocus: false} });

  24. OPcode
    Posted on August 30, 2014 at 04:01 Permalink

    While using onTotalScroll and onTotalScrollBack callbacks to update content of vertical news list I’ve noticed the following behaviour:
    1. When the dragger hits the bottom the content is added at the bottom, the container stays in place and the dragger adjusts its height and position – moves up relative to its previous position – so it can be moved to bottom again to trigger onTotalScroll. So all is good.
    2. When the dragger hits the top the content is added at the top, the container stays in place but visually due to added content it appears as though the container is moved down, the dragger adjusts its height and stays in place – at the topmost position – so it can’t be moved to the top again, you need first to move it down.

    To make it look like the container stays in place after adding content at the top I’ve tried scrolling to the element that prior to updating the content was first in the list but this is very noticeable.

    So my question is: is it somehow possible to make it look like the container always stays in place when adding content at the top?
    E.g. it could be some function that could freeze the container’s position with the option to signify that the content is being added at the top or at the bottom so that the css of the container could be adjusted accordingly.

    • malihu
      Posted on August 30, 2014 at 04:49 Permalink

      Yes (with a bit of extra code).
      Your idea of using the scrollTo method is the correct way to do it. You need to set scrollInertia option parameter of the method to 0, so it scrolls “instantly” and also to find the proper position to scroll-to.

      The best way to find where to scroll-to is to subtract the “old” content height from the “new” one (you should be able to store the “old” content height in a variable before the new content is loaded). Then, you can use the result and subtract it from the current content position.

      It sounds a bit complicated but it’s not… for example:
      var oldContentHeight=$(".content .mCSB_container").innerHeight(); /* your code that loads new content... */ var heightDiff=$(".content .mCSB_container").innerHeight()-oldContentHeight; $(".content").mCustomScrollbar("scrollTo","-="+heightDiff,{scrollInertia:0});

      I’ve made a simple but fully working example where you can see and grab the code here:

      • OPcode
        Posted on August 30, 2014 at 10:09 Permalink

        Thank you for the answer.
        But unfortunately even scrollInertia 0 does not make the jitter go away. In your example this jitter is seen during the first content addition. It is not seen during the following additions because the content is the same.

        • malihu
          Posted on August 30, 2014 at 16:58 Permalink

          Ah I see…
          This happens due to the 60 millisecond timeout of the method. If you need a quick fix (until I update the script), you can edit jquery.mCustomScrollbar.js, find line 619 and change 60 to 0.
          I’ll probably introduce an option parameter for this on the next update (in a few days).

          • OPcode
            Posted on August 30, 2014 at 23:36 Permalink

            Unfortunately changing this timeout value to 0 or making the code from that setTimeout on lines 61* synchronous does not resolve the problem – the content’s jitter is still noticeable (in Firefox).
            Also I’ve noticed another kind of jitter – the dragger’s jitter. Sometimes when the dragger is large it is noticeable how after adding content at the top it first jumps to its new position and then adjusts its height (when updateOnContentResize is true) or vice versa (when updateOnContentResize is false and I first update scrollbar and then scroll). Or maybe I’m already seeing things after looking at the scrolling content too much.

        • malihu
          Posted on September 6, 2014 at 09:42 Permalink

          Sorry for the late reply!

          The jitter in Firefox is fixed in version 3.0.4 (just released). So check the demo one more time and download/use version 3.0.4.

          The scroll-to timeout can now be set via the timeout option of the method like this:

          The second jitter you noticed should also be eliminated with new version, especially when using updateOnContentResize:false with the update method.

  25. Anton
    Posted on August 29, 2014 at 14:04 Permalink

    Hello Malihu,

    i have an “Highslide Thumbnail Viewer” and i try to call an iFrame to give it new Scrollbars.
    The DIV i will call is: .highslide-body iframe.

    I give the iframe a new height…

    It not works…

    I need a help!


  26. imran
    Posted on August 28, 2014 at 21:48 Permalink

    Hello sir, i have a problem with the js file. by using this stylish scrollbar i can’t use .toggle() function anymore. why it is conflicting with the jquery 1.7.2 ?
    and second please tell me how to make the scrollbar speed fast.

    • malihu
      Posted on August 28, 2014 at 22:58 Permalink


      To change the scrolling momentum, use the scrollInertia option parameter. To change mouse-wheel “speed” use the mouseWheel:{ scrollAmount: integer } option parameter. For example:
      $(selector).mCustomScrollbar({ scrollInertia: 950, mouseWheel:{ scrollAmount: 100 } });

      For the first part of your question, I need more info about the problem or maybe a link to check it online.

  27. Alva
    Posted on August 28, 2014 at 03:25 Permalink

    your plugin is awesome i integrate it in one of my websites.
    I would like to integrate it in a wordpress site, which would be the best approch to do this?


    • malihu
      Posted on August 28, 2014 at 22:40 Permalink


      The following is a good way of adding the plugin in your theme manually:

      1. Create a new folder inside your theme directory and name it “custom-scrollbar”. Place the jquery.mCustomScrollbar.concat.min.js, jquery.mCustomScrollbar.css and mCSB_buttons.png files inside it.

      2. Create a new js file: jquery.mCustomScrollbar.init.js inside “custom-scrollbar” folder. Insert the following code in it, replacing selector with your element(s) and options:

      (function($){ $(window).load(function(){ $(selector).mCustomScrollbar({ theme:"dark" }); }); })(jQuery);

      3. Edit your themes functions.php and insert the following PHP code which loads plugin’s css and js files in your templates:

      function custom_scrollbar_init() { if(!is_admin()){ /* add plugin stylesheet */ wp_enqueue_style( 'customscrollbar-css', get_template_directory_uri() . '/custom-scrollbar/jquery.mCustomScrollbar.css' ); /* add plugin main js */ wp_enqueue_script( 'customscrollbar-js', get_template_directory_uri() . '/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js', array('jquery'), '3.0.3', true ); /* add plugin init js */ wp_enqueue_script( 'customscrollbar-init-js', get_template_directory_uri() . '/custom-scrollbar/jquery.mCustomScrollbar.init.js', array('jquery', 'customscrollbar-js'), '3.0.3', true ); } } add_action('wp_enqueue_scripts', 'custom_scrollbar_init');

      4. Create your content and elements that’ll have a custom scrollbar and you’re done.

      You could of course skip the creation of jquery.mCustomScrollbar.init.js and either place its code directly in your theme’s footer.php or main js file or just add the mCustomScrollbar class to your element(s) to apply the scrollbar with the default options.

      • Alva
        Posted on September 1, 2014 at 15:29 Permalink

        it Works like a charm thank you very much

  28. t0s
    Posted on August 27, 2014 at 14:57 Permalink


    Thank you for your plugin, but i have two questions:

    1) Is it normal behavior?
    // callbacks works fine
    $('#content').mCustomScrollbar({callbacks: { onScroll: function() { console.log('scroll') } }})
    // callbacks don’t works
    $('#content').mCustomScrollbar(); $('#content').mCustomScrollbar({callbacks: { onScroll: function() { console.log('scroll') } }})

    2) I write $(‘#content’).mCustomScrollbar(); but #content is empty and scroll does not appear. Then i add content in $(‘#content.mCSB_container’) and in some moment scroll appears. Can i listen this event?

    • malihu
      Posted on August 28, 2014 at 01:36 Permalink

      1) Yes, this is normal behavior. To re-initialize a scrollbar with different options, most of the times you’ll need to destroy the scrollbar before calling mCustomScrollbar function again on the same element. For instance:
      $('#content').mCustomScrollbar(); $('#content').mCustomScrollbar("destroy"); $('#content').mCustomScrollbar({callbacks: { onScroll: function() { console.log('scroll') } }})

      2) There’s no user available callback within the plugin script to check if the scrollbar is visible/active or not. This said, you could get your element’s state as when no scrollbar is needed, it gets the class: mCS_no_scrollbar. This class won’t be present when content is long enough to require the scrollbar.

      • t0s
        Posted on August 30, 2014 at 19:40 Permalink

        Ok, thank you very much!

        Sorry, I’m posted my questons twice

  29. Tahir
    Posted on August 27, 2014 at 13:32 Permalink

    Is there a way to use a theme without javascript?

    • malihu
      Posted on August 28, 2014 at 01:26 Permalink

      Yes, by using the data-mcs-theme attribute in your html. For example:
      <div data-mcs-theme="inset">...</div>

      • Tahir
        Posted on August 28, 2014 at 12:45 Permalink

        Thanks. Now there’s another problem.

        I have a main container and a nested container with only horizontal scrollbar.
        <div class="pmain mCustomScrollbar" data-mcs-theme="dark"> <div class="pvert" data-mcs-axis="x" data-mcs-theme="dark">

        Problem is that the horizontal scrollbar (for nested container) only shows if I add the following code (taken from a demo).
        $(".pvert").mCustomScrollbar({ advanced:{autoExpandHorizontalScroll:true}});

        • malihu
          Posted on August 28, 2014 at 20:00 Permalink

          The horizontal custom scrollbar works the same way CSS overflow-x:auto works, meaning your (inner) content should be wider than its container (the element with the scrollbar).

          For instance, when you have left-floated elements directly inside a div, those will stack horizontally only until they’ve reached the div’s right side. The next floated element(s) will form a “new line”.
          To make your content wider, you’d need to wrap your floated elements in another div which must have a higher width value than its container. For example:
          <div class="the-div-with-the-scrollbar" style="width:400px;"> <div class="the-wrapper-div" style="width:800px;"> <div class="floated-div">...</div> <div class="floated-div">...</div> <div class="floated-div">...</div> </div> </div>

          The plugin, via the autoExpandHorizontalScroll option parameter provides a way to add the wrapper (in the example above: .the-wrapper-div) automatically, in order to expand its width according to its contents without the need for you to add a fixed width.

          So you either need to use this option, or add such a div manually in your html.

          Hope this helps

  30. Tomek
    Posted on August 27, 2014 at 11:53 Permalink

    When I refresh page first I see “standard” browser grey scrollbar (it means – about half second) and after that I see jquery scroll bar.
    Where is the reason?

    • malihu
      Posted on August 28, 2014 at 01:21 Permalink

      This happens because the plugin is initialized when page is fully loaded, e.g.:
      $(window).load(function(){ $(".content").mCustomScrollbar(); });

      So while the page is loading, the default browser scrollbar appears normally and when all content is loaded, it’s replaced by the custom scrollbar. This happens on overflow:auto elements.

      There are 2 ways of dealing with this:
      1. Initialize the plugin on DOM ready:
      $(document).ready(function(){ $(".content").mCustomScrollbar(); });

      2. Set your element’s CSS overflow property to hidden:
      .content{ overflow:hidden; }

      • Tomek
        Posted on August 28, 2014 at 13:03 Permalink

        Second option works. Thanks!

  31. Fikri
    Posted on August 26, 2014 at 04:05 Permalink


    How to set scroll position to bottom when content update dynamically ?


    • ddd
      Posted on August 26, 2014 at 08:54 Permalink

      not any option… that time only default scroll will work not any jquery…

      like on popup.

    • ddd
      Posted on August 26, 2014 at 08:59 Permalink

      or you can put that updated div in left or right position -9999% something .

      not put that updated div as display:none.

    • malihu
      Posted on August 26, 2014 at 22:51 Permalink

      Each time the content is updated, call plaugin’s scrollTo method, e.g.: $(selector).mCustomScrollbar("scrollTo","bottom");

  32. VamosErik88
    Posted on August 24, 2014 at 19:00 Permalink

    Hi malihu, I just started using your plugin on my startup website and I’m loving it!
    However I’m encountering a little issue. Let me explain:

    1. As stated on the instructions I’m initializing the plugin calling it in the header of my page and assigning the required tag to the body as follows:
    <body class="full-page mCustomScrollbar _mCS_3 mCS-autoHide" style="position: relative; overflow: visible;">

    2. The scrollbar works flawlessly. Now what I need is the body to scroll to a specified div when a button is clicked on the page. I’m trying to do it by calling the specific scrollTo method but it is not working. Here is the function I’m using:
    jQuery("#next_arr").click(function() { jQuery(this).toggleClass('rotate'); jQuery( "#discover_container").slideToggle( "slow" ); jQuery( "#arr_container").slideToggle( "slow" ); jQuery('body').mCustomScrollbar("scrollTo","bottom"); });
    May you help me solving this issue? Thanks so much in advance.

    • malihu
      Posted on August 25, 2014 at 02:30 Permalink


      When you say it’s not working, you mean it doesn’t scroll to the “correct” div or it doesn’t scroll at all?

      If it does scroll maybe you need to call the scrollTo method after animations are complete:
      jQuery("#arr_container").slideToggle("slow", function(){ jQuery('body').mCustomScrollbar("scrollTo","bottom"); });

      If it doesn’t scroll at all, check if you get any console errors when opening your page with browser\s developer tools (other errors might prevent the script from executing).

      • VamosErik88
        Posted on August 26, 2014 at 09:55 Permalink

        Hi malihu,

        Thanks fro the rapid response. However the issue seems not solved. I tried with the code provided by you but it doesn’t go. The problem is that the body doesn’t scroll at all. I checked the console with the Chrome inspector but there are no errors. Any idea why the scroll is not working? All the other jQuery animations are working except the scroll.

        • malihu
          Posted on August 26, 2014 at 22:48 Permalink

          I’m assuming that the #discover_container and #arr_container elements hold content that changes the body length when toggled.

          Since body has a custom scrollbar attached, each time those elements are toggled, the script needs to update the scrollbar according to content length. While the script updates the scrollbar, it’ll interrupt any scrollTo method calls (this is by design).

          It seems that this is the reason your scrollTo method call doesn’t work. The script hasn’t finish updating the scrollbar according to content’s length (which is changing with the toggled elements) and so it prevents the scroll-to bottom animation.

          Since both your slideToggle animation have the same duration (‘slow’) the code I posted should work, but maybe the ‘rotate’ class toggle triggers another CSS3 animation that’s longer than the others.

          In any case, the goal is the same. Call the scrollTo method after all animations are fully done. You could probably add a timeout and do some tests changing the milliseconds value to see when it’ll work. For example:
          setTimeout(function(){ jQuery('body').mCustomScrollbar("scrollTo","bottom"); },700);

          • VamosErik88
            Posted on August 29, 2014 at 01:25 Permalink

            Thank you so much man!

            Setting the Timeout to 600 solved the issue and now everything is working flawlessly!

            Check out my website SportAround.me and look how well your scrollbars fits on it! ;)

        • malihu
          Posted on August 29, 2014 at 03:50 Permalink

          Looks great :) Good work!

  33. web designer treviso
    Posted on August 20, 2014 at 15:28 Permalink

    The plugin is fantastic .Thanks, I’m using it in many projects

  34. Sean
    Posted on August 19, 2014 at 22:57 Permalink

    Maybe I missed the documentation but is there a way to enable scrolling when implementing drag/droping within the div which mCustomScrollbar is applied to? Utilizing Jquery sortable and would like to be able to drag and auto scroll when I drag past the top or bottom of the scroll area.

    • Sean
      Posted on August 19, 2014 at 23:43 Permalink

      this is a quick hack I put together although it needs work, right now if I drag over the area it will start scrolling to either the top or bottom determined if I drag past the top or bottom of the area…

      // Hacking the List
      document.onmousedown = docOnMousedown;
      document.onmouseup = docOnMouseup;
      function docOnMousedown(e){
      mouseIsDown = true;
      function docOnMouseup(e){
      mouseIsDown = false;
      $(“#dynamic-list “).mouseleave(function(e) { //Dynamic list is my scrolling windows parent div
      var window = $(this);
      var bottom = window.offset().top + window.outerHeight();
      var top = 0;

      if(e.pageY >= top && mouseIsDown == true){ // dragged past top of parent window

      if(e.pageY >= bottom && mouseIsDown == true){ // dragged past bottom of parent window
      // Hacking the List

      any ideas? or am I overthinking this….

      • Sean
        Posted on August 20, 2014 at 02:00 Permalink

        haha, this is great. Thanks a bunch, tweaking it now but works like a charm!

      • Claude
        Posted on September 5, 2014 at 23:26 Permalink


        when I’m trying your solution with jquery UI sortable widget I have the error showing :
        Uncaught Error: Syntax error, unrecognized expression: -=390

        I tried to change the expression by setting a variable s= null and use it like this :

        With this I can scroll down 1 time and then nothing happen I still can’t sroll up.

        Could you help me please ?

        PS: Sorry for my bad/weird English that not my first language.

        • malihu
          Posted on September 5, 2014 at 23:44 Permalink

          You must use -=/+= as a string or part of string. In your case:

          In general, the way to use -=/+= is:
          $(selector).mCustomScrollbar("scrollTo","-=100"); $(selector).mCustomScrollbar("scrollTo","-="+var);

          • Claude
            Posted on September 6, 2014 at 19:16 Permalink

            I know I should use :
            but that only return an error :
            Uncaught Error: Syntax error, unrecognized expression: -=190

        • malihu
          Posted on September 7, 2014 at 23:05 Permalink

          Notice the double quotes for -=:

          You get the error because you have:
          which should be:

  35. Daniele
    Posted on August 19, 2014 at 19:32 Permalink

    When I view ma page with Safari, I get the default scrollbar beside the custom scrollbar. You can see it here: http://www.fondationmarcjurt.ch/biographie.
    What am I doing wrong ?

    • Daniele
      Posted on August 19, 2014 at 21:00 Permalink

      Never mind, my bad !
      My div had overflow: auto. I changed it to hidden, and everything is fine !

  36. Kevin
    Posted on August 18, 2014 at 16:37 Permalink

    I have noticed that the mcs object is initialized when the scroll event occurs. However, within our application, we need it initialized when the DOM is ready. Is there a way to do this so that mcs is initialized when the DOM is ready?
    The page has several other components and it is not necessarily the case that the scrolling is the first action yet it may be referenced from actions taken on other components on the page.

    • malihu
      Posted on August 18, 2014 at 18:43 Permalink


      mcs object is intended to be used with plugin’s callbacks, so in order to be triggered, there has to be a scroll event.
      You could “trick” it though by simply triggering a scroll event (e.g. from -1px to 0) on dom ready and make the mcs object available.
      For example:
      $(document).ready(function(){ $("#content-1").mCustomScrollbar({ setTop:"-1px", callbacks:{ onScroll:function(){} } }).mCustomScrollbar("scrollTo",0,{scrollInertia:0}); setTimeout(function(){ console.log($("#content-1")[0].mcs.top); },150); });

      What this does is:
      a) Sets content initial top position to -1px,
      b) Adds an empty anonymous function to onScroll callback,
      c) Scrolls content to top (0) with zero inertia
      d) Then, after say 150 milliseconds, the mcs object is available: $("#content-1")[0].mcs

      This is a way to trigger mcs on dom ready, but if you simply need to check content’s position, you could easily do:
      $("#content-1 .mCSB_container").position().top; or
      $("#content-1 .mCSB_container")[0].offsetTop;

    • Kevin
      Posted on August 22, 2014 at 11:42 Permalink

      Thanks for your help really helped.

  37. Mark
    Posted on August 15, 2014 at 16:01 Permalink

    Amazing slider.
    But I have come to a roadblock.
    How do I make the slider responsive for images? I want it to be a horizontal slider and the images height fill out the height of the slider. Also is it possible to have it scale to various screen sizes and devices?


  38. Max
    Posted on August 15, 2014 at 10:21 Permalink

    I sort of got this to work, but it works quite strangely for me. In order for it to work I have to take out of the top of my html doc or else it just doesn’t work. I can’t get this to work at all with bootstrap framework. Tried putting a custom tool bar encasing an entire grid of the entire page and no custom tool bar appeared. I assigned a width, height and, overflow to the class that I used to enclose the grid and still nothing. I’ve read, re-read and tried, and retired the steps over and over and can’t see anything I am missing. Any tips? I find it very strange that It doesn’t work when I put in my html doc and does without it. Is that normal? Sorry I am very new to this stuff. Thanks for posting this material by the way, it’s very much appreciated.

    • Max
      Posted on August 15, 2014 at 10:23 Permalink

      I wrote is what I took out. Not sure why the webpages is taking that away from my sentence.

      • Max
        Posted on August 15, 2014 at 10:24 Permalink

        !HTMLDOC type with brackets is what I wrote in the blanks above. posting keeps taking that out.

        • malihu
          Posted on August 15, 2014 at 12:57 Permalink

          Post your html doctype/code within code tag:
          <code>html code here</code>

          • Max
            Posted on August 16, 2014 at 20:12 Permalink

            I put the code tag as for first line on the top then put !DOCTYPE html right after, and closed all of my code with

            . So
            tag even encases the tags. When I did this it shifted my page one bar down (not the body but the grid I created with bootstrap framework). So I was left with a white line on the top. It also changed the text to red. However when I take the
            tags out and don’t even declare doc type at all it seems to work fine. Kinda strange. Thanks for the help. You are really a great person to be helping so many people with this stuff. I really appreciate it.

          • Max
            Posted on August 16, 2014 at 20:15 Permalink

            I closed my code with code tag*. Where there seems like there is a blank I wrote code in tags.

          • Max
            Posted on August 16, 2014 at 20:57 Permalink

            One thing I noticed as well is when I just use doctype html at top without code tags as I would normally do. When I inspect the element of the page the class is changed to mCustomScrollbar _mCS_1 mCS_no_scrollbar
            as when I remove it the class is mCustomScrollbar _mCS_1. Somehow the normal !doctype is changing this first class name.

          • Max
            Posted on August 17, 2014 at 05:55 Permalink

            Oh, sorry I just noticed what you meant by that. Thought you were referring to do that to my code. My bad.

  39. lazaros
    Posted on August 14, 2014 at 20:15 Permalink

    Hello! I have a problem when i hide the div (it’s a modal) that contains the scrollbar. I want the scrollbar to keep its position but it keeps reseting to top!

    • malihu
      Posted on August 14, 2014 at 20:28 Permalink

      This is normal since hiding the modal, means its dimensions become zero (the same would happen with browser’s native scrollbar on any overflowed element).

      To accomplish what you describe, you’d need to write an extra script which will get and store content’s top position before closing the modal and then use plugin’s scrollTo method to scroll-to the (stored) content position when modal is opened again.

      • lazaros
        Posted on August 15, 2014 at 09:47 Permalink

        Ok thank you!

  40. juju
    Posted on August 13, 2014 at 19:28 Permalink


    I don’t succeed to do appear axis x. I have put on the selector overflow-x: visible; and on the script axis: "x"
    Has someone had already the same problem?


    • malihu
      Posted on August 14, 2014 at 01:18 Permalink

      Does your element have a width set? Does your content expand horizontally? Is your content wide enough to require a horizontal scrollbar?

      If your code works with browser’s native scrollbar, it’ll work with the custom scrollbar too.

      Maybe you need to set the autoExpandHorizontalScroll option parameter to true to automatically expand your inner floated content:
      advanced:{ autoExpandHorizontalScroll: true }

  41. sten
    Posted on August 12, 2014 at 23:48 Permalink

    With the new Version UpdateOnContentResize dont work.

    I must before use a Ajaxcall destroy the scrollbar and rebuild after the call.

    Before i dont need destroy the bar first.

    Sorry for my english.

  42. Adam Laki
    Posted on August 12, 2014 at 17:29 Permalink


    Firstly, thanks for the great work! Really! :)

    Unfortunatly, I’m stucked with my problem. I’d like to use the top/down arrow navigation without clicking in the scrollbar div section. Is there any way to trigger the plugin to be the scrollbar section active (as I see, first I have to click into the section, to use arrow navigation)?

    Thanks for your reply!


    • malihu
      Posted on August 14, 2014 at 01:10 Permalink


      The default way of triggering keyboard navigation is the same as browser’s native scrollbar. This means that the scrollable area must have focus.

      You could do what you describe by adding few lines of code below mCustomScrollbar function call in order to get element focus on mouse-over:
      $(".content").mouseenter(function(){ $(this).focus(); }).mouseleave(function(){ $(this).blur(); });

      This way, when you’re hovering your cursor over the element with the scrollbar you’ll be able to use keyboard keys (like up/down) to scroll its content.

  43. Michael Bryzgalov
    Posted on August 10, 2014 at 17:02 Permalink

    It will a better to this plugin will have a offline help reference (HTML or PDF) and header file with externs declarations for Google Closure Compiler (like http://code.google.com/p/closure-compiler/wiki/ExternsForCommonLibraries). Such header file may be used in IntelliJ IDEA or other IDE for IntelliSense.

  44. Christian
    Posted on August 8, 2014 at 14:45 Permalink

    is there a way to create a link which links to a different url AND “scrollto”-Position?


    test1.html contains a table of Sponsors

    test2.html contains a scroll div listing each Sponsor with details

    Sponsors in test1.html are linked to test2.html and scrollto Position

    Sponsor 5 does not work, if on test1.html.

    Any Idea?


    • Christian
      Posted on August 8, 2014 at 14:50 Permalink

      <a rel="scrollto-par-5" href="test2.html">Sponsor 5</a>, sorry, forgot to wrap with code

    • malihu
      Posted on August 8, 2014 at 15:50 Permalink

      This would work the same way as if you didn’t have a custom scrollbar. For example you’d have to use a hash in your link’s href (e.g. test2.html#/sponsor-5). Then a script would get the hash (sponsor-5) and invoke a scrollTo method on say #sponsor-5 (which could be an element id):

    • malihu
      Posted on August 8, 2014 at 19:21 Permalink

      Code example:

      After invoking the plugin in your page, e.g.:

      Get location hash (e.g. #/sponsor-5) from URL (e.g. test2.html#/sponsor-5) and remove slash:
      var to=window.location.hash.replace("/","");
      variable to becomes #sponsor-5

      Scroll-to element with id sponsor-5 which exists inside your scrollable div (e.g. .content):

  45. Wendi
    Posted on August 7, 2014 at 21:32 Permalink

    hi there! i love this control and have used it plenty. I am currently having trouble seeing the scrollbar if the page url has an anchor tag in it.

    for instance:

    visit http://www.shfm-online.org/2014-wednesday

    click the link “Jerry White” in the content text area.

    on the next page, the anchor finds the right place within the text, but the scrollbar is nto visible. you can see it here w/o the anchor:


    i am using Version: 3.0.3 and my code is

    (function($){ $(document).ready(function() { $(".mCustomScrollbar").mCustomScrollbar(); }); })(jQuery); i've tried using the "scrollTo" feature, to no avail. any suggestions?

    • malihu
      Posted on August 8, 2014 at 07:14 Permalink

      You need to include the plugin files: jquery.mCustomScrollbar.css and jquery.mCustomScrollbar.concat.min.js in your page (see “How to use it” section above).
      When this is done, you need to use the scrollTo method to scroll-to #jwhite position:

  46. Topogigio
    Posted on August 7, 2014 at 12:39 Permalink

    Is there any way to include just a theme in css? 53 KB are quite large…


  47. mano
    Posted on August 6, 2014 at 19:04 Permalink

    Hi, great plugin!

    I want to ask whether it is possible to somehow bind hotizontal scrolling to deltaX and vertical scrolling to deltaY only. Thanks.

  48. Todd Fletcher
    Posted on August 5, 2014 at 20:13 Permalink

    I see a few others have a problem with ‘mCS_no_scrollbar’. I have the same issue. I guess that because I am loading the div content via AJAX, that when the scrollbar is loaded there is nothing in the div… after which the section loads and the nifty scrollbar is not display?

    I see there is a way to force the scrollbar to always show. However, I have not been able to get that to work. Any help?

    • malihu
      Posted on August 6, 2014 at 03:38 Permalink


      The first thing to check is if your element has a height or max-height set. This is essential for the scrollbar (any scrollbar) to function.

      The second thing is where and how you’re loading your content. If the scrollbar is initialized before your ajax call, you need to load your content inside the .mCSB_container div and not directly in your element, e.g.:
      $(".content .mCSB_container").append(data)

      The plugin archive contains an ajax example in case you need to check its source: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/ajax_example.html

  49. Andrey
    Posted on August 5, 2014 at 16:24 Permalink

    Hi! I have problem with dragging slider, it doesn’t work in IE11. How I can solve this problem?


    • malihu
      Posted on August 6, 2014 at 03:45 Permalink

      The plugin works well in IE (you can verify it by checking all demos and examples scrollbar functionality in IE). Your issue with IE11 is probably CSS related(?). In any case, I can’t really help unless I see your page online.

  50. vijayan
    Posted on August 5, 2014 at 14:02 Permalink


    I have two horizontal scroll, here my question is
    Once complete the first horizontal scroll automatically page will scroll and now targeting the second scroll (i mean page vertical scroll).

    How can i implement the scrollTo function.

    Thanks & regards,
    Vijayan M

    • malihu
      Posted on August 6, 2014 at 03:57 Permalink


      I don’t really know what you’re trying to do, but info on implementing the scrollTo method you can find here and in plugin examples:

      If you want to stop page scrolling after your element scrolling is complete, you need to set the mouseWheel preventDefault option parameter to true, e.g.:
      $(selector).mCustomScrollbar({ mouseWheel:{ preventDefault:true } });

      • vijayan
        Posted on August 6, 2014 at 15:14 Permalink


        Thanks for reply. I fixed the problem its working fine and this is my Code:

        callbacks: { onTotalScroll: function () { $('html, body').scrollTop(1705); } }

        instead of the this line – $(‘html, body’).scrollTop(1705);

        i used – $(‘html, body’).animate({scrollTop:$(this.hash).offset().top}, 1705);

        but the smooth scroll not happened.
        How can i smooth page scroll.

        Thanks & regards,
        Vijayan M

        • malihu
          Posted on August 7, 2014 at 06:20 Permalink

          My guess is that you probably need to do:
          (‘html, body’).animate({scrollTop:1705}, 1000);
          Where 1705 is the position and 1000 the animation duration in milliseconds (1 sec).

          $(this.hash).offset().top would need to be used inside a click event where this would be a link object.

          • vijayan
            Posted on August 7, 2014 at 10:23 Permalink

            Thanks malihu

            this is my code
            $('html, body').animate({scrollTop:$(".step2-container").offset().top-80},1500);

            its working fine :)

  51. agha
    Posted on August 5, 2014 at 11:37 Permalink

    Hi, thank you very much. the scrollbar works like a charm, but how can I
    make the scrollbar visible only on scroll event (I mean when the mouse wheel moves or the pointer is exactly on the scrollbar). I don’t want it to become visible when the mouse pointer is on the Element.

    • malihu
      Posted on August 5, 2014 at 15:10 Permalink


      You’ll need to edit the CSS file. More specifically in “6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS” you should remove:
      .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools
      which is few lines below.

      The dynamic class applied to the scrollbar when it’s scrolling the content is: .mCSB_scrollTools_onDrag

  52. Jeroen Vorsselman
    Posted on August 1, 2014 at 16:49 Permalink

    This plugin looks beautiful!

    But how can i place the scrollbar inside an existing element?

    I’ve got a element with a fixed size but the height of the element can change. I need the scrollbar to have a absolute position inside the element instead of having a scrollbar next to it.
    Can i do this with pure css or did i miss a property that needs to be set?

    • Jeroen Vorsselman
      Posted on August 1, 2014 at 17:38 Permalink

      I updated the fiddle to show what i mean:


    • malihu
      Posted on August 2, 2014 at 04:39 Permalink

      You’d need to give your element at least max-height value (without a height or max-height a scrollbar, any scrollbar, cannot work).

      You can change the positioning of the scrollbar (which has position:absolute) itself via the CSS file and via the scrollbarPosition option parameter.

  53. Alex Lutz
    Posted on July 31, 2014 at 15:08 Permalink

    Good job, great plugin, Thank You!

  54. Kamel
    Posted on July 30, 2014 at 00:48 Permalink

    Great plugin ! But it doesn’t work for me :/ All files are included, but I don’t know why it’s not working. I followed this tutorial but for him, it works : https://www.youtube.com/watch?v=niEG065e8Aw

    What could me my problem ?

    • malihu
      Posted on August 8, 2014 at 20:29 Permalink

      Make sure all plugin files (css and js) are included in your page (make sure paths are correct).
      Check if you’re calling mCustomScrollbar on existing element(s) and make sure your element(s) have a height or max-height set.

      Check your page with browser developer tools and see if you get any console errors.

  55. Srdjan
    Posted on July 29, 2014 at 16:05 Permalink


    I want to have 2 horizontal scrollbars. The first on the top and the second on the bottom.
    Is ti possible to achieve this with your jQuery plugin?

    Thanks in advance!

    • malihu
      Posted on July 29, 2014 at 20:42 Permalink

      Not really. You can’t have two same-axis scrollbars on the same element.

  56. Alexey
    Posted on July 29, 2014 at 11:29 Permalink


    First of all : thanks for a really nice plugin having a very good performance!

    I have a problem, that mouse wheel doesn’t work, when the mouse pointer points to scrollbar itself. Is it possible to change it?



    • malihu
      Posted on July 29, 2014 at 20:40 Permalink


      When scrollbarPosition option is set to “inside” (default), the mouse-wheel scrolling works when hovering over the scrollbat itself. When scrollbarPosition is set to “outside”, it doesn’t work as the scrollbar is placed outside of the content wrapper element that triggers mouse-wheel scrolling.

      So your only option is to change the scrollbarPosition option parameter.

  57. Cseh Szabolcs
    Posted on July 23, 2014 at 16:04 Permalink

    Hello there,

    i love this plugin, its very cool! But there is somethink, what should be changed:


    function myCustomFn(el){
    var msg="Content inside the element with id '"+el.attr("id")+"' has scrolled "+mcs.topPct+"%"; //<-- mcs is global available in the window-object

    The variable 'mcs' is available in the window.object. But that really don't belong there. This sould be moved in the jQuery-data of the element or something:

    // instead of:
    // should be like this:

    And sorry for my terrible english :-)

    • malihu
      Posted on July 29, 2014 at 20:56 Permalink


      Since version 3.0.0 the mcs object is moved in the actual element instead of window (this.mcs):
      $("#content_1").mCustomScrollbar({ callbacks:{ whileScrolling:function(){ console.log(this.mcs.top); } } });

  58. Steven
    Posted on July 23, 2014 at 06:03 Permalink

    Odd behavior…..only in Firefox though.

    I consumed an rss feed and got everything to work perfectly in a single page….whether it is IE, FF or Chrome. View the page looks great.

    I then created another page and wanted the feed to show up within a div on the new page…..so I tried using jQuery to display a web page within a div…..works great in IE and Chrome, but not Firefox….the scroll bar shows the default scroll bar.

    Also…tried iframe and that works ok with IE, FF and Chrome too….

    Here is the jQuery code I used to try and bring the web page into a div (trying to use this instead of iframe).

    Here is the jQuery code I used.






    Not sure why I can’t get it to work.

  59. shareef
    Posted on July 23, 2014 at 02:19 Permalink

    When I put twitter widget within the scrolled div, the widget disappear.
    but when I put it outside the scrolled div ,the widget appears.
    Why ? How to fix that ?

    thanks a lot to malihu team..

    • logik
      Posted on August 7, 2014 at 06:12 Permalink

      I am having this same issue. I’d like to know if this ever gets solved.

    • malihu
      Posted on August 7, 2014 at 07:12 Permalink

      This happens due to how twitter api works. To make twitter widgets render within elements with scrollbar do the following:

      Place the anchor tag (<a class="twitter-timeline"...>...</a>) of the twitter widget code inside the scrolled div. Place only the anchor tag and NOT the script tag!

      Copy the code of the twitter widget script tag (!function(d,s,id){...}(document,"script","twitter-wjs");) and paste it below your mCustomScrollbar function call inside window load function.

      This will make your widgets work and initialized correctly.

      • Steve
        Posted on August 14, 2014 at 05:37 Permalink

        I too was having issues with trying to get the scroller to work with the twitter widget. I found this code to not work for me.

        What I did to make it work was put the semi-colon outside the last paren….like this…


        Just an FYI in case someone else came across this.

        Thank you for the plugin…it works great.

  60. ali
    Posted on July 22, 2014 at 11:55 Permalink

    thanks man… i’m gonna use it on my website… http://www.khabartek.ir

  61. Martin
    Posted on July 22, 2014 at 11:42 Permalink

    Really cool looking plugin but I run into problems with it and have no idea what’s going wrong.
    The examples work well but whenever I try to implement the faeture(s) into my own page the custom bars won’t show up. I must say that I’ve altered the directory structure (directory “css” and “js” for corresponding files) and adjusted the source code for the page to fit with the new determined structure but the bars aren’t there.

    So I grabbed one of the example html files and put it into the root of my project folder, altered the source code. Nothing happened, the same effect, style.css ist working but not the bars.

    So my question is: What have I missed? Is there a way to reorganize the folder structure to my presonal needs?

  62. Wendi
    Posted on July 21, 2014 at 00:31 Permalink

    wonderful plugin, but…

    i love this plugin and have used it numerous times without issue. today, however, is different. it is working just fine until i add this link to my header:

    this is a google font. with this in the header, i see the text flash on the page, then quickly disappear. i do not see the scrollbar either.

    any ideas??

  63. Evgeni
    Posted on July 19, 2014 at 17:14 Permalink

    I just found that amazing plugin and I want it to try it on my website gallery.

    I manage to run it with except that I can run only the Y scroll but not the X scroll
    which I need.

    I am posting link and I will be happy to explain me why its not working.


  64. sandeep
    Posted on July 19, 2014 at 08:19 Permalink

    I am using your scroll bar for my sidebar in my project i am adding it to tag But it is not working.. FOr every time i am getting

    <nav id="sidebar" class="mCustomScrollbar _mCS_1"> <div id="mCSB_1" class="mCustomScrollBox mCS-light-thin" style="position:relative; height:100%; overflow:hidden; max-width:100%;"> <div class="mCSB_container mCS_no_scrollbar" style="position: relative; top: 0px;"></div>

    Plz hel me….

    • Nicolas
      Posted on July 24, 2014 at 11:21 Permalink

      I have exactly the same problem, did you find a fix for this?

      I am using dotclear for my blog.

      On the simple html/js/css template I had no issue making work this awesome plugin, but on the dotclear version it doesnt work anymore and show me “mCS_no_scrollbar” div.

  65. sandeep
    Posted on July 19, 2014 at 08:17 Permalink

    I am using your scroll bar for my sidebar in my project i am adding it to tag But it is not working.. FOr every time i am getting

    Plz hel me….

  66. Ian
    Posted on July 19, 2014 at 00:07 Permalink

    I have interesting problem where call to mCustomScrollbar (V2.8) only works once.

    This is in Adobe EdgeCC. It is worth noting that this problem did *not* occur in prior versions of Edge.

    The following code will work the first time it is executed, but the next time the timeline returns, the html is displayed, but without the scrollbar.
    Any ideas what changed in either EdgeCC, or mCustomScrollbar (V2.8) ?
    sym.$("Contents").html("<p>Page1 Dolor sit amet, etc...</p>"); sym.$("Contents").mCustomScrollbar({ autoDraggerLength:true, scrollInertia:800, mouseWheel:{ enable: true, scrollAmount: 60 }, scrollButtons:{ enable: false, } });

  67. Tom
    Posted on July 18, 2014 at 21:47 Permalink

    Hey guys! I am trying to add this scrollbar to my textarea. I cannot seem to figure this out!

    Thanks for any help!

  68. Chris
    Posted on July 18, 2014 at 13:08 Permalink

    This an amazing plugin, thank you :)

  69. Viktor
    Posted on July 15, 2014 at 16:48 Permalink

    Hello Dears
    Please help me
    I try use this plugin with JQuery AJAX
    When i use method append(data) – no problem, scroll updated, but my site have just one main where i show all content. For it i use innerHTML or html(data). I must clear main div for show content via AJAX
    In zip example ajax just add content, but it no need for me
    How i can call scroll after replacement content?

    Ajax code
    (function ($) { $(window).load(function () { $("#body").delegate("a[rel='link']", "click", function (e) { e.preventDefault(); var url = $(this).attr("href"); $.ajax({ url: url, type: 'POST', datatype: 'xml', data: 'ajax=1', success: function (data) { $('#content').html(data); $('#content').mCustomScrollbar(); } }); window.history.pushState(null, null, url); return false; }); if (location.href != (location.protocol + '//' + location.host + '/')) { $.ajax({ url: location.href, type: "POST", datatype: 'xml', data: 'ajax=1', success: function (data) { $('#content').html(data); $("#content").mCustomScrollbar(); } }); } $(window).bind('popstate', function () { if (location.href != (location.protocol + '//' + location.host + '/')) { $.ajax({ url: location.href, type: "POST", datatype: 'xml', data: 'ajax=1', success: function (data) { $('#content').html(data); $("#content").mCustomScrollbar(); } }); } else { document.getElementById('content').innerHTML = ''; } }); }); })(jQuery);

    <table class="all_content" id="all_content"><tr><td style="width: 0%" id="first_td"></td> <td style="width: 20%"> <div class="menu" id="menu"> <div id="menu_ico" class="menu_ico2"> <div class="menu_head"> <img alt="Верхний логотип" src="/img/top_logo.png" /> </div> <div class="menu_main_icon"> <img alt="Основной логотип" src="/img/main_logo.png" /> </div> <div class="menu_flo" id="menu_flo_1"> <div class="login_button" id="logout" onclick="login(this)">Выход</div> </div> </div><div class="menu_menu" id="menu_menu"><ul> <li><a href="/test.php" class="menu_link" rel='link' ><?php echo $m1;?></a></li> <li><a href="/test2.php" class="menu_link" rel='link' ><?php echo $m2;?></a></li> <li><a href="/test3.php" class="menu_link" rel='link' ><?php echo $m3;?></a></li> <li><a href="/link/top_link.php" class="menu_link" rel='link' ><?php echo $m4;?></a></li> <li><a href="/test6.php" class="menu_link" rel='link' ><?php echo $m5;?></a></li> <li><a href="/test7.php" class="menu_link" rel='link' ><?php echo $m6;?></a></li> <li><a href="/link/contact.php" class="menu_link" rel='link' ><?php echo $m7;?></a></li> </ul> </div> </div> </td> <td class="td_content"><div class="content" id="content"></div> </td></tr></table>

  70. Leandro Beni
    Posted on July 14, 2014 at 05:29 Permalink

    Great job this plugin!

    It is sad that the examples are a messy… I spent a lot of time trying to use the RTL example and I give up…
    Can someone help me?

  71. JSNewbie
    Posted on July 12, 2014 at 10:46 Permalink

    I’m using the pluging for scrolling in table cells(with “snapAmount” option) and all is working great, except one thing:

    Is there a way to detect which cell is currently visible and add it a class or something similiar to mark it red for example?

  72. Ravichandran Jayaramegowda
    Posted on July 10, 2014 at 16:59 Permalink

    Beautiful scrollers collection. Awesome works. Thanks for providing a good tutorial explaining each component in brief. This is a must have component for developing any web applications.


  73. Michael
    Posted on July 9, 2014 at 23:43 Permalink


    Nice plugin. I noticed a possible bug with the new 3.x library, as well as the documentation. Previously in 2.x, totalScrollOffset was specified in pixels, so specifying 20px would result in the onTotalScroll() event being called when the slider reaches 20px from the bottom of the panel. However, in 3.x I noticed in the JS code that a scrollRatio is being applied to the passed in totalScrollOffset. This changes the behavior of totalScrollOffset. I either need to know the size of my container and my content and calculate the scrollRatio accordingly (which isnt a good solution, since i usually dont have that info when im setting up the scrollbar) or the calculation should change to consider the value I pass in as pixels relative to the dragger container and not the content container.


  74. Marcello
    Posted on July 9, 2014 at 19:53 Permalink

    Hi there!

    thanks for this awesome tool. It works where I’ve got static content.
    Yet when I try to apply it to a div the text-content of which is loaded via JQuery, the standard scrollbar appears.
    Is there a way to get the customised scrollbar to appear?

    • Guido
      Posted on July 16, 2014 at 12:05 Permalink

      You need to add the scrollbar in the success function of your asynchronous call.

  75. Matjaz
    Posted on July 8, 2014 at 10:26 Permalink

    Cannot get the scrollbar to function with keyboard (up/down)

    theme: “light-2″,
    scrollbarPosition: ‘outside’,
    advanced: {
    keyboard: {
    scrollType: ‘stepped’,
    scrollAmount: 38

    and tried also this

    theme: “light-2″,
    scrollbarPosition: ‘outside’,
    keyboard: {
    scrollType: ‘stepped’,
    scrollAmount: 38

  76. Guido
    Posted on July 2, 2014 at 14:26 Permalink


    first of all I want to thank you very much for that awsome plugin. My question is, whether it is possible to decrease the space between the vertical scrollbar and the content. I have very small boxes to fill with content and there is each pixel important.
    Best Regards

  77. IşıkFX
    Posted on July 1, 2014 at 14:31 Permalink

    Thank for post !

  78. Niko Oviedo
    Posted on July 1, 2014 at 09:17 Permalink

    GREAT JOB! This plugin, work’s on ie browser? Saluts!

  79. sdfdf
    Posted on June 30, 2014 at 13:30 Permalink


  80. Migiyaka
    Posted on June 28, 2014 at 03:31 Permalink

    Hey, I’m having a problem that sometimes, scrollTo doesn’t scroll to desired coordinates. If you received the website in the comment, it’s called when a portfolio item is clicked, and when you click on an item in “related projects” section – sometimes it scrolls to the top (desired behavior), and sometimes it cuts off some 100-200px from the top. Any help would be appreciated.

  81. Alexandre P
    Posted on June 27, 2014 at 16:25 Permalink

    Is it possible with the current version to be able to vertically scroll an horizontal scrollbar and still be able to scroll down the page? Right now if I try to scroll down while touching the content it restricts me to the x-axis. I read in the comments that you were planning on adding a functionality for this about a year ago. Has it yet been added in? Can’t seem to find anything else that could solve my problem.

  82. raiffy
    Posted on June 27, 2014 at 15:39 Permalink


    first of all, congrats for such amazing tool. It works almost flawlessly except for the snapAmount (y scroll, version 3.0.x). If (and only if) I have a two rowed content, it never scrolls to the second row by using the mousewheel. Every element has the same height which I used as the snapAmount. Any idea? I’m posting the code:

    var step = (modo == “mural”)?(parseInt(Y.one(“#itens”).getComputedStyle(“height”))):0;

    snapAmount: passo,
    autoHideScrollbar: true,
    scrollInertia: false,
    setHeight: passo – 10,
    keyboard:{ scrollType: “stepped”}


    • raiffy
      Posted on June 27, 2014 at 15:41 Permalink

      the ‘setHeight’ line is just a test, plase ignore it… and suppose modo == “mural”

  83. Alex
    Posted on June 26, 2014 at 16:43 Permalink

    Simple question, when I try to use the return values (left, leftPct, top, topPct), this.mcs is always undefined at the beginning. For it to have a value I have to either move one of the scrollbar’s slider or try and get its value once with this.mcs.[...] and then it suddenly isn’t undefined. Just wondering if I’m doing something wrong here.

    ss.mCustomScrollbar(“scrollTo”, (function(el) {
    return 0;

    Also, the object el.mcs returns me somehow only has these values:

    draggerLeft: 0
    draggerTop: 0
    left: 0
    leftPct: 0
    top: 0
    topPct: 0

    No content. Why is that?

    • Alex
      Posted on June 26, 2014 at 18:10 Permalink

      Never mind, didn’t realise I could just use this directly into the callback function (DUHH).

      Thanks a lot for this great plugin nonetheless :P

      • Alex
        Posted on June 26, 2014 at 18:13 Permalink

        Never mind again, I still have the same problem when I use “this” directly.

        • Alex
          Posted on June 26, 2014 at 18:20 Permalink

          Well a temporary fix I found is calling this line after initializing the scrollbar:

          /* Fixes the undefined value of this.mcs */
          $(“.mCustomScrollbar”).mCustomScrollbar(“scrollTo”, 0);

          • ellmo
            Posted on July 15, 2014 at 15:05 Permalink

            I’m having the same problem here,

            this.mcs is always undefined so scrolling callbacks are useless to me

Comments pages: 1 14 15 16

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>