This website uses cookies to personalise ads and to analyse traffic ok
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.1.5 (Changelog)
Upgrading from version 2

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 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 is still maintained and updated here.

How to use it

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

Instead of hosting the plugin files on your web server, you can load them directly from a CDN like jsdelivr, Github etc.

  • jsdelivr versioned/minified
    • //
    • //
    • //
  • Github latest/minified
    • //
    • //
    • //


Include jquery.mCustomScrollbar.css in the head tag your HTML document (more info)

jquery.mCustomScrollbar.css contains the styling of the custom scrollbar and 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/copy 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. This file should be in the same directory with plugin stylesheet.

<link rel="stylesheet" href="/path/to/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

Some frameworks and CMS include jQuery library in the head tag to make sure it’s loaded when other scripts request it. Usually, including .js files on the bottom of the HTML document (just before the closing body tag) is recommended for better performance. In any case, jQuery must be included first, before plugin scripts.

<script src=""></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>


The element(s) you want to add scrollbar(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. For horizontal scrollbar, the element should have a width (or max-width) value set.

If you prefer to set your element’s height/width via javascript, you can use the setHeight/setWidth option parameters.


Initialize via javascript

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


more info

The code is wrapped in (function($){ ... })(jQuery);. This ensures no conflict between jQuery and other libraries using $ shortcut (see Avoiding Conflicts with Other Libraries for more info). The plugin function is called in $(window).on("load") so it executes after all page elements (like images) are loaded.

You can change the function selector ".content" to any selector you want (an element id, class name, js variable etc.). 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


Initialize via HTML

Add the class mCustomScrollbar to any element you want to add custom scrollbar(s) with default options. Optionally, set its axis via the HTML data attribute data-mcs-axis (e.g. "x" for horizontal and "y" for vertical) and its theme via data-mcs-theme. For example:

<div class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- your content -->

Basic configuration & option parameters


By default, the script applies a 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 quickly change the appearance of the scrollbar, set the theme option parameter to any of the ready-to-use themes available in jquery.mCustomScrollbar.css, for example:



You can configure your scrollbar(s) using the following option parameters on mCustomScrollbar function
Usage $(selector).mCustomScrollbar({ option: value });

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).
Example: setTop: "-100px".
setLeft: 0
Set the initial css left property of content, accepts string values (css left position).
Example: setLeft: "-100px".
axis: "string"
Define content’s scrolling axis (the type of scrollbars added to the element: vertical and/of horizontal).
Available values: "y", "x", "yx".

  • axis: "y" – vertical scrollbar (default)
  • axis: "x" – horizontal scrollbar
  • axis: "yx" – vertical and horizontal scrollbars
scrollbarPosition: "string"
Set the position of scrollbar in relation to content.
Available values: "inside", "outside".
Setting scrollbarPosition: "inside" (default) makes scrollbar appear inside the element. Setting scrollbarPosition: "outside" makes scrollbar appear outside the element. 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 document’s root element).
scrollInertia: integer
Set the amount of scrolling momentum as animation duration in milliseconds.
Higher value equals greater scrolling momentum which translates to smoother/more progressive animation. Set to 0 to disable.
autoDraggerLength: boolean
Enable or disable auto-adjusting scrollbar dragger length in relation to scrolling amount (same bahavior with browser’s native scrollbar).
Set autoDraggerLength: false when you want your scrollbar to (always) have a fixed size.
autoHideScrollbar: boolean
Enable or disable auto-hiding the scrollbar when inactive.
Setting autoHideScrollbar: true will hide the scrollbar(s) when scrolling is idle and/or cursor is out of the scrolling area.
Please note that some special themes like “minimal” overwrite this option.
autoExpandScrollbar: boolean
Enable or disable auto-expanding the scrollbar when cursor is over or dragging the scrollbar.
alwaysShowScrollbar: integer
Always keep scrollbar(s) visible, even when there’s nothing to scroll.

  • alwaysShowScrollbar: 0 – disable (default)
  • alwaysShowScrollbar: 1 – keep dragger rail visible
  • alwaysShowScrollbar: 2 – keep all scrollbar components (dragger, rail, buttons etc.) visible
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 elements. Note that your elements must be of equal width or height in order for this to work properly.
To set different values for vertical and horizontal scrolling, use an array: [y,x]
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 header.
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 (delta) 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:
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.

  • scrollType: "stepless" – continuously scroll content while pressing the button (default)
  • scrollType: "stepped" – each button click scrolls content by a certain amount (defined in scrollAmount option above)
scrollButtons:{ tabindex: integer }
Set a tabindex value for the buttons.
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.

  • scrollType: "stepless" – continuously scroll content while pressing the arrow key (default)
  • scrollType: "stepped" – each key release scrolls content by 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: 25).
documentTouchScroll: boolean
Enable or disable document touch-swipe scrolling for touch-enabled devices.
advanced:{ autoExpandHorizontalScroll: boolean }
Auto-expand content horizontally (for "x" or "yx" axis).
If set to true, content will expand horizontally to accommodate any floated/inline-block elements.
Setting its value to 2 (integer) forces the non scrollHeight/scrollWidth method. A value of 3 forces the scrollHeight/scrollWidth method.
advanced:{ autoScrollOnFocus: "string" }
Set the list of elements/selectors 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.
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.
Default value is auto which triggers the function only on "x" and "yx" axis (if needed).
The value should be true when your content contains images and you need the function to trigger on any axis.
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.
advanced:{ extraDraggableSelectors: "string" }
Add extra selector(s) that’ll release scrollbar dragging upon mouseup, pointerup, touchend etc.
Example: extraDraggableSelectors: ".myClass, #myID"
advanced:{ releaseDraggableSelectors: "string" }
Add extra selector(s) that’ll allow scrollbar dragging upon mousemove/up, pointermove/up, touchend etc.
Example: releaseDraggableSelectors: ".myClass, #myID"
advanced:{ autoUpdateTimeout: integer }
Set the auto-update timeout in milliseconds.
Default timeout: 60
theme: "string"
Set the scrollbar theme.
View all ready-to-use themes
All themes are contained in plugin’s CSS file (jquery.mCustomScrollbar.css).
Default theme: "light"
      onCreate: function(){}
A function to call when plugin markup is created.
      console.log("Plugin markup generated");
      onInit: function(){}
A function to call when scrollbars have initialized (demo).
      console.log("Scrollbars initialized");
      onScrollStart: function(){}
A function to call when scrolling starts (demo).
      console.log("Scrolling started...");
      onScroll: function(){}
A function to call when scrolling is completed (demo).
      console.log("Content scrolled...");
      whileScrolling: function(){}
A function to call while scrolling is active (demo).
      onTotalScroll: function(){}
A function to call when scrolling is completed and content is scrolled all the way to the end (bottom/right) (demo).
      console.log("Scrolled to end of content.");
      onTotalScrollBack: function(){}
A function to call when scrolling is completed and content is scrolled back to the beginning (top/left) (demo).
      console.log("Scrolled back to the beginning of content.");
      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.
      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 to call when content becomes long enough and vertical scrollbar is added.
      console.log("Vertical scrolling required");
      onOverflowX: function(){}
A function to call when content becomes wide enough and horizontal scrollbar is added.
      console.log("Horizontal scrolling required");
      onOverflowYNone: function(){}
A function to call when content becomes short enough and vertical scrollbar is removed.
      console.log("Vertical scrolling is not required");
      onOverflowXNone: function(){}
A function to call when content becomes narrow enough and horizontal scrollbar is removed.
      console.log("Horizontal scrolling is not required");
      onBeforeUpdate: function(){}
A function to call right before scrollbar(s) are updated.
      console.log("Scrollbars will update");
      onUpdate: function(){}
A function to call when scrollbar(s) are updated.
      console.log("Scrollbars updated");
      onImageLoad: function(){}
A function to call each time an image inside the element is fully loaded and scrollbar(s) are updated.
      console.log("Image loaded");
      onSelectorChange: function(){}
A function to call each time a type of element is added, removed or changes its size and scrollbar(s) are updated.
      console.log("Scrollbars updated");
live: "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 a 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

Ways to execute various plugin actions programmatically from within your script(s).


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

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

view examples

/* initialize plugin with auto-update options disabled */
    updateOnContentResize: false,
    updateOnImageLoad: false

/* at some point in your js script/code update scrollbar manually */


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

Call the scrollTo method to programmatically scroll the content to the position parameter (demo).

position parameter

Position parameter can be:

  • "string"
    • e.g. element selector: "#element-id"
    • e.g. special pre-defined position: "bottom"
    • e.g. number of pixels less/more: "-=100"/"+=100"
  • integer
    • e.g. number of pixels: 100
  • [array]
    • e.g. different y/x position: [100,50]
  • object/function
    • e.g. jQuery object: $("#element-id")
    • e.g. js object: document.getelementbyid("element-id")
    • e.g. function: function(){ return 100; }

Pre-defined position strings:

  • "bottom" – scroll to bottom
  • "top" – scroll to top
  • "right" – scroll to right
  • "left" – scroll to left
  • "first" – scroll to the position of the first element within content
  • "last" – scroll to the position of the last element within content

view examples

Scroll to element with id “#el-1″


Scroll to top


Scroll by 100 pixels down or right

var val=100;

Scroll by 100 pixels up or left


Scroll by 100 pixels down and by 50 pixels right


Scroll to the fifth paragraph


Scroll to the last element within your content


Scroll to some variable value

var val=document.getelementbyid("element-id");

Scroll to 300 pixels


Method options

scrollInertia: integer
Scroll-to duration, value in milliseconds.
scrollEasing: "string"
Scroll-to animation easing, values: "linear", "easeOut", "easeInOut".
moveDragger: boolean
Scroll scrollbar dragger (instead of content).
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.
callbacks: boolean
Trigger user defined callbacks after scroll-to completes.


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

Stops any running scrolling animations (usefull when you wish to interupt a previously scrollTo method call).


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

Calling disable method will temporarily disable the scrollbar (demo). Disabled scrollbars can be re-enable by calling the update method.

To disable the scrollbar and reset its content position, set the method’s reset parameter to true


view examples

/* initialize plugin */

/* at some point in your js script/code disable scrollbar */

/* re-enable scrollbar as needed */


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

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

view examples

/* initialize plugin */

/* at some point in your js script/code destroy scrollbar */

Scrollbar styling & themes

You can design and visually customize your scrollbars with pure CSS, using jquery.mCustomScrollbar.css which contains the default/basic styling and all scrollbar themes.

The easiest/quickest way is to select a ready-to-use scrollbar theme. For example:


View all ready-to-use themes

You can modify the default styling or any theme either directly in jquery.mCustomScrollbar.css or by overwriting the CSS rules in another stylesheet.

Creating a new scrollbar theme

Create a name for your theme (e.g. “my-theme”) and set it as the value of the theme option


Your element will get the class “mCS-my-theme” (your theme-name with “mCS” prefix), so you can create your CSS using the .mCS-my-theme in your rules. For instance:

.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }
.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ background-color: white; } 
/* and so on... */

In the same manner you can clone any existing theme (e.g. “dark”), change its selector (e.g. .mCS-dark) to your own theme name (e.g. .mCS-my-theme) and modify its CSS rules.

Scrollbar markup

The plugin applies specific id (unique) and/or classes to every scrollbar element/component, meaning that you can target and modify any scrollbar in more than one ways.

For example, every element with a scrollbar gets a unique class in the form of _mCS_1, _mCS_2 etc. Every scrollbar container element gets a unique id in the form of mCSB_1_scrollbar_vertical, mCSB_2_scrollbar_vertical etc. Every scrollbar dragger gets a unique id in the form of mCSB_1_dragger_vertical, mCSB_2_dragger_vertical etc. in addition to the class mCSB_dragger. All these mean that you can do stuff like:

._mCS_1 .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }

._mCS_2 .mCSB_dragger .mCSB_dragger_bar{ background-color: green; }

#mCSB_3_dragger_vertical .mCSB_dragger_bar{ background-color: blue; }

#mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; }

#mCSB_1_scrollbar_horizontal .mCSB_dragger{ width: 100px; }

.mCSB_1_scrollbar .mCSB_dragger .mCSB_draggerRail{ width: 4px; }

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 (view example).

The following will trigger the callback function when content has scrolled to bottom minus 100 pixels

            console.log("scrolled to bottom");

By default, onTotalScroll and onTotalScrollBack callbacks are triggered repeatedly. To prevent multiple calls when content is within their offset, set alwaysTriggerOffsets option to false (view example).

            console.log("scrolled to bottom");

Additional callbacks:

Returning values

The script returns a number of values and objects related to scrollbar that you can use in your own functions

  • this – the original element containing the scrollbar(s)
  • this.mcs.content – the original content wrapper as jquery object
  • – 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)

view examples

Load more content when scrolled to bottom


Run code when at least half of the content is scrolled

            var pct=this.mcs.topPct;
              /* do something... */

Plugin-specific jQuery expressions

Select element(s) in your content that are within scrollable viewport.
As condition: $("#myID").is(":mcsInView");
Select overflowed element(s) with visible scrollbar.
As condition: $(".content").is(":mcsOverflow");
Select element(s) in your content that are in view of the scrollable viewport. Using the exact parameter will include elements that have any part of them (even 1 pixel) in view of the scrollable viewport.
As condition: $("#myID").is(":mcsInSight");, $("#myID").is(":mcsInSight(exact)");

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 3 4


Post a comment

Comments pages: 1 65 66 67 68 69 84

  1. R. Jones
    Posted on August 11, 2015 at 22:38 Permalink

    Great plugin man! But I am having one problem – please could you take a look at my Stack Overflow question? Any help would be highly appreciated – thanks ๐Ÿ™‚

    • Manos
      Posted on August 12, 2015 at 13:02 Permalink

      To disable mouse-wheel use:
      mouseWheel:{ enable: false }

      option info

  2. sumo
    Posted on August 11, 2015 at 22:04 Permalink

    Its a great plugin..!!

    Our website has two div’s which the user can toggle between..
    main div
    top div
    Some text
    bottom div
    Some text

    I am placing a vertical scroll bar on โ€œbottomโ€ div and horizontal on โ€œtopโ€ div.

    The issue I am facing is โ€“ the โ€œdraggerโ€ is moving to the top (like reset) when I toggle between the div’s.

    Is there any solution for it?
    Really appreciate your time..


    • malihu
      Posted on August 20, 2015 at 13:44 Permalink

      Without knowing how your page works, it sounds like some element (e.g. a button) is getting focus and activates the auto-scroll feature of the plugin. If this is the case, you can use the autoScrollOnFocus option parameter to set your own element selectors that trigger the auto-scroll event:

      advanced:{ autoScrollOnFocus: "input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']" }

      So if a button element is the culprit, just remove the selector from the value:

  3. athomas
    Posted on August 11, 2015 at 18:35 Permalink

    How can I use this with Angular? do i implement it as a directive. Because it only works on one page in angular its not loading the script throughout the urlproviders.

  4. Jaydeep
    Posted on August 11, 2015 at 07:46 Permalink

    Hello everyone,
    Am trying to change .mCSB_dragger_bar image with dynamic text like (values between 1 to 100 while scrolling). so is it possible to change this?

    • malihu
      Posted on August 11, 2015 at 09:19 Permalink

      You can use the this.mcs.topPct object inside a callback to automatically get the text (0 to 100).


      Assuming your main element has id: content-1, you can do:

      $("#content-1").mCustomScrollbar({ autoDraggerLength: 0, //make dragger height fixed callbacks:{ onInit:function(){ //on initialization: create a span that'll hold your text //and append vertical scrolling percentage object (0-100) $(this).find(".mCSB_dragger_bar").html("<span>"+this.mcs.topPct+"&deg;</span>"); }, whileScrolling:function(){ //while scrolling: append vertical scrolling percentage object to span element $(this).find(".mCSB_dragger_bar > span").html(this.mcs.topPct+"&deg;"); } } });

      and your CSS could be something like:

      /* increase dragger width to accommodate the text */ #content-1 .mCSB_scrollTools{ width: 26px; } #content-1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 26px; } #content-1 .mCSB_scrollTools .mCSB_dragger{ height: 60px; /* set dragger height */ } #content-1 .mCSB_dragger_bar > span{ line-height: 60px; /* center the text vertically */ font-size: 10px; color: red; }

  5. Demna
    Posted on August 10, 2015 at 20:09 Permalink

    This truly is a wonderful plugin! Saved me a lot of effort.
    However, it seems I’ve encountered a problem that I’m having some trouble to fix.

    I have pretty much everything on the website I’m working on set in percentages โ€“ height, width, even font-size(vh & vw), and everything’s working perfectly, but when I use this plugin, height no longer works as it should. Now, it is only as large as the content in it โ€” as if it were given height: auto. Only pixels โ€” or any other fixed values โ€” work. But you see, I can’t use pixels.

    I suspect it is because of the extra wrapper DIVs this plugin creates, but I’m not sure. I’m using CDN, so I tried giving .mCSB_1_container a property of height: 100%, but that removed the scrollbar โ€” and rendered the page completely unscrollable โ€” altogether.

    As you said in the documentation, I also tried to use setHeight in JS, but since it’s just a boolean value, I don’t really understand how it works or what it does โ€” it certainly didn’t change anything.

    Any way to solve this problem?

    Thanks in advance.

    • Demna
      Posted on August 10, 2015 at 20:16 Permalink

      I did setHeight: 100%, and now the height of the child elements works, but the actual custom scrollbar is no more โ€“ it reverted back to the original, browser scrollbar.

    • malihu
      Posted on August 11, 2015 at 03:54 Permalink

      The plugin should work with vw and vh values (setting your element height in vh via CSS should normally work without issues). If you can send me a link I might be able to help.

  6. John
    Posted on August 10, 2015 at 15:05 Permalink

    This looks like a great plugin. Is there a way to ignore touch events inside the scrollable content, and only scroll when the touch event is on the scrollbar itself? I have a div with (jQuery UI) sortable items inside it, so when the user drags an item within this div, I want the sortable drag-and-drop behavior to happen, rather than scrolling the content.

    • malihu
      Posted on August 10, 2015 at 17:19 Permalink

      See contentTouchScroll option parameter. You can disable it by setting it to false:
      contentTouchScroll: false

      • John
        Posted on August 10, 2015 at 19:26 Permalink

        That is awesome — thanks! I saw that in the docs but misinterpreted what it meant. I thought it disabled all touch, but reading it again, it makes sense.

  7. Tanzib
    Posted on August 9, 2015 at 09:32 Permalink

    hello, this is nice plugin. Can u please tell me how can i change the container(mCSB_container) size dynamically? um using

    jq("#tzb_artistic_structure3_video_suggestion_box div.suggested_video_container").attr('style', 'width:'+7540+'px !important');
    but its not working some places.

    • malihu
      Posted on August 9, 2015 at 10:03 Permalink

      but it depends on your layout and what exactly you want to do…

      • Tanzib
        Posted on August 9, 2015 at 10:35 Permalink

        thank you for your reply sir. let me check I think its conflicting with some other codes.

  8. jonty
    Posted on August 8, 2015 at 19:49 Permalink

    Nice post really helpful i also viewed another tutorial on The tutorial is based on how to create a custom scrollbar using css

  9. tai game ai la trieu phu
    Posted on August 8, 2015 at 16:48 Permalink

    My page requires both x and y scrollbars but Iโ€™m having troubled getting the horizontal scrollbar to work.

    • malihu
      Posted on August 9, 2015 at 10:28 Permalink

      Do you apply the scrollbars on the whole page (e.g. to the body tag)?

      If yes, some basic CSS for the default theme would be:
      /* set page height */ html, body{ height: 100%; } /* set page minimum width in .mCSB_container (not in body). Also set its width to 100% to keep your inner elements relative sizes correct */ body.mCustomScrollbar > .mCustomScrollBox > .mCSB_container_wrapper > .mCSB_container{ min-width: 640px; width: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* change scrollbars containers position from absolute to fixed so both stick to the viewport (always visible) */ body.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools{ position: fixed; }

      and the basic JS options:
      $("body").mCustomScrollbar({ axis:"yx", advanced:{ autoExpandHorizontalScroll: 1 } });

      If you’re using a theme like “minimal”, you do:
      html, body{ height: 100%; position: static !important; overflow: hidden; } body.mCustomScrollbar > .mCustomScrollBox > .mCSB_container_wrapper > .mCSB_container{ min-width: 640px; width: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools{ position: fixed; }

      $("body").mCustomScrollbar({ theme:"minimal", axis:"yx", advanced:{ autoExpandHorizontalScroll: 1 } });

  10. Johntrepreneur
    Posted on August 6, 2015 at 22:49 Permalink

    Is it configurable to have it overlay your content? I was able to achieve this by adding some CSS that affected one of the scrollbars divs, but would prefer to do it thru the configuration if possible.

    I have a small limited space I’m working with and would prefer for the scrollbar not to take up those horizontal pixels. Instead, I’d change the opacity to half and show/hide it while overlaying it on top of my content. Then it would look fine on top and save space.

    Is this overlay possible thru the configuration?


    • malihu
      Posted on August 7, 2015 at 00:46 Permalink

      Do you mean like the “minimal” theme?

      You can use a theme like this directly (view all ready-to-use themes), e.g.:
      $(selector).mCustomScrollbar({ theme: "minimal-dark" });
      or use few relevant option parameters separately, like:
      scrollbarPosition: "outside"
      autoHideScrollbar: true

      You can also change the scrollbar right position directly in CSS (jquery.mCustomScrollbar.css, line: 71), e.g.:
      right: 20px;
      and content container (.mCSB_container) right margin (jquery.mCustomScrollbar.css, line: 54), e.g.:
      .mCSB_inside > .mCSB_container{ margin-right: 0px; }

      Changing scrollbar CSS along with scrollbarPosition option will allow you to customize it exactly the way you want. Otherwise you can just use (or alter) a theme like “minimal”.

  11. Ikram
    Posted on August 5, 2015 at 19:37 Permalink

    Question: I have an animation that does an auto-scrolling every time some onComplete event occurs. See this function that that I chip-in on every onComplete even of the animation library Im using.

    var onComplete = function() {
    $(“.substeps .list-wrap”).mCustomScrollbar(“scrollTo”, “-=35”, {
    scrollInertia: 2000,
    timeout: 1000

    However, I would like the animation to stop the auto-scrolling if the user scrolls manually on the area. My problem is that I cannot distiguish between a so-called ‘auto-scrolling’ vs. the manual scroll.

    How do I do this? The callbacks onScroll() cannot be used because it would behave exactly the same for both auto/manual. Callbacks, as I understand it, are registered on the time of initialization.

    Anyways, I was thinking about doing something like this. But how do I pass that fromAuto param to my onScroll even that distinguishes the auto/manual scroll?

    callbacks: {
    onScroll : function(fromAuto){
    console.log(‘From Auto Scrolling’);
    console.log(‘From Manual Scrolling.);

    Thank you.

    • malihu
      Posted on August 5, 2015 at 23:29 Permalink

      There’s an object generated by the script which lets you know how scrolling events where last triggered. The object returns “internal” (default – triggered by plugin script) or “external” (triggered by other scripts, e.g. via scrollTo method).

      You can access the object like this:"mCS").trigger

      So in your case, you’d normally want to check if a scroll event was triggered by the scrollTo method:
      if($(".substeps .list-wrap").data("mCS").trigger==="external"){ //last scrolling event was triggered by scrollTo }else{ //last scrolling event was triggered by the user }

      I think this is what you need

  12. Shmili
    Posted on August 5, 2015 at 18:23 Permalink

    Hi I’m trying to use your custom scrollbar on an element included with ng-include (angularJS) but it doesn’t seem to fire and there is no scroll bar.

    If you can advice I would appreciate


  13. Jamie
    Posted on August 5, 2015 at 11:58 Permalink

    Great plugin, malihu.

    I wonder how to apply scroller plugin to a chat app. In there, I need to append chat item from newest to oldest, and from bottom to top, which is reversed to current behaviour. I noticed lib generate top value in item list div like following:

    position: relative; left: 0px; top: -2804px;

    Is it possible to replace top value with “bottom: 0px”;

    In addition, is it able to set a fixed height to scroller bar?


    • Ian
      Posted on August 5, 2015 at 12:05 Permalink

      I need to append the newest chat item to be closer to comment box. Item list is from oldest to newest. If you look at comment system here, my comment would be posted on top.

    • malihu
      Posted on August 6, 2015 at 00:06 Permalink

      Each time you append a new message to chat, you need to append the message inside .mCSB_container element. For example:
      $("#my-chat .mCSB_container").append(message);

      After each new message is appended you can use plugn’s scrollTo method to scroll to bottom, e.g.

  14. Michael Treser
    Posted on August 5, 2015 at 11:48 Permalink

    Hi Manos,

    Thanks for a great solution for cusomizing scrollbars. That looks and works great, easy in use and easy to customize!

    I have encountered problems with jquery custom content scroller in pair with jquery ui sortable. I have a sortable list with drag and drop items that can be moved or removed, after which they are built into a new list from the remaining elements. My task was to add to the list a custom scrollbar, as the list may contain a large number of elements.

    When the page loads everything fine. The problems start when you try to move one of the items in the list (). There is some inconsistencies between libraries. After droping an element custom scroll disappears, default scrolbar appears instead, and the list gets the extra width and goes to the footer, as the layout is broken.

    I also noticed that when you try to drag one of the list items appears changes in the structure of scroll DOM tree. div.mCustomScrollBox becomes an sibling element for all list-items, instead of being their parent. Maybe you have some ideas how to resolve this issue?

    Thanks in advance,

  15. George P
    Posted on August 4, 2015 at 14:38 Permalink

    Hello there !

    I am using your plugin and it is really awesome! Great job!

    I am having an issue though, maybe you can share some tips.

    The plugin is applied to a hamburger menu (position fixed) and when the height of the navigation is bigger than the viewport height I initialize the plugin to the menu. So far I am ok!

    But when I scroll and I reach the bottom of the navigation, the html keep scrolling down. How can i prevent this? That goes for both scrolling and touchmove from the mobile.

    • malihu
      Posted on August 4, 2015 at 21:42 Permalink

      You can use the mouseWheel:preventDefault option parameter for the mouse wheel:
      mouseWheel:{ preventDefault: true }

      There’s no option for touch though, as depending on the device, page layout and zoom level, it’ll probably render the page unusable. For example, if your menu takes all viewport area, you won’t be able to zoom-out or scroll the rest of the document at all.

    • Heave
      Posted on August 4, 2015 at 22:33 Permalink

      If I understand you correctly have a look on this very page : under Configuration –> mouseWheel:{ preventDefault: boolean }

      • Heave
        Posted on August 4, 2015 at 22:35 Permalink

        Sorry…. hadn’t seen malihu’s answer ๐Ÿ™‚

        • George P
          Posted on August 9, 2015 at 12:02 Permalink

          Hello everyone, thanks for the replies! I have already set the “mouseWheel:{ preventDefault: boolean }”, but since the website is meant to be the mobile version I care more about the touch event.

          The navigation when it is opened it has a specific width, smaller than any mobile screen size, that’s why I don’t think that it will be a problem about taking all the viewport width.

          Any ideas how this could implement?

  16. simon
    Posted on August 3, 2015 at 14:52 Permalink

    i have tried it and it has worked well with me……….thanks alot buddy …. this is a wonderful blog…kudos

  17. Mike Burnett
    Posted on August 2, 2015 at 20:16 Permalink

    This is excellent! Thank you for doing it.

    I’ve got everything working and customizable, however I’m having trouble getting the draggerRail to resize. Is there something I’m missing or is there perhaps an error in the example above?

    .mCSB_1_scrollbar .mCSB_dragger .mCSB_draggerRail{ width: 4px; }

  18. Heave
    Posted on August 2, 2015 at 02:24 Permalink

    What an excellent job you’ve been doing, man !
    I’m a newbie to webdesigning and have been reading tons of articles and forums for days just to end up with the frustrating conclusion that you feel more confused after reading than before ! What you say, explain and offer here is crystal clear, high-quality, fully customizable, free and… it works like a charm.
    Hats off to you and grateful thanks ๐Ÿ™‚

  19. Md.amin ali
    Posted on July 29, 2015 at 23:53 Permalink

    It’s not work in html5 .Are you have any solution?

    • Korey
      Posted on July 31, 2015 at 23:40 Permalink

      This does work in HTML5, as that is what I am using. Just make sure you only use 1 of the two initialization methods…. (Javascript one at the bottom is what worked for me.)

      The HTML option will work, but you need to specify the data attributes as well.

  20. Korey
    Posted on July 28, 2015 at 18:03 Permalink

    I have a problem…

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

    this creates the bar, and it works, however the theme does not work. nor does any other parameter option.

    • malihu
      Posted on August 3, 2015 at 15:29 Permalink

      Hey, do you still have this issue?

      Since you’re initializing via javascript, make sure you’re not using the data attributes or the “mCustomScrollbar” class in your element prior to initialization.

  21. Taug
    Posted on July 28, 2015 at 14:50 Permalink

    Hi , thanks for your amazing job !
    Is there a way to disable one of my callbacks ? ๐Ÿ™‚
    Thanks in advance.

    • malihu
      Posted on August 3, 2015 at 15:35 Permalink

      Can you describe what you want to do?

  22. api
    Posted on July 27, 2015 at 10:03 Permalink

    thanks for your plugin free, only a question!
    the scroll plugin is responsive for use in devices mobiles!, thanks ๐Ÿ™‚

    • malihu
      Posted on August 3, 2015 at 15:31 Permalink

      Yes. The plugin archive contains many examples of non-fixed/responsive elements with custom scrollbar.

  23. Natty
    Posted on July 27, 2015 at 08:58 Permalink


    My page requires both x and y scrollbars but I’m having troubled getting the horizontal scrollbar to work.

    Any suggestions?

  24. Luis Martinez
    Posted on July 25, 2015 at 00:34 Permalink

    Hello, I really love this plugin, quick question…. is there any way to remove the scrolling effect? scrolling feels very heavy comparing with

    • Holger Tschurl
      Posted on July 27, 2015 at 15:50 Permalink

      In the config object, pass scrollIntertia: 0, like so:
      $('#element').mCustomScrollbar({ ... scrollInertia: 400 ... });

  25. Scott
    Posted on July 23, 2015 at 07:22 Permalink

    Thanks for this great plugin. I tried searching the over 4000 comments about this. My apologies if it’s been asked/answered before..

    On IOS browsers, is it possible to mimic the “mouseWheel: prevent Default” setting?

    This doesn’t appear to be working on touch/move events on IOS Safari and Chrome: The parent element continues to scroll when end of scrolling is reached.

    • malihu
      Posted on August 3, 2015 at 15:41 Permalink

      There’s no option for this for touch events. This is because, depending on the page layout, the device resolution and the zoom level, you could easily render the page unusable. If the element with the scrollbar fills all viewport, the user won’t be able to scroll the document and see the rest of the content…

  26. Akter Uddin
    Posted on July 20, 2015 at 20:51 Permalink

    I have been trying to place a full page scroller into our developed website at webpage content area. Can anyone please help?

  27. Meital
    Posted on July 14, 2015 at 15:39 Permalink

    I’ve been trying to incorporate the mCustomScrollbar with Kendo UI editor, with no success.
    Does anyone know how this can be done?

    here’s the code I’ve written:

    var editor = $(object).data(“kendoEditor”);
    $(editor.body).css(“overflow-y”, “hidden”);
    theme: “dark-2”

  28. Jaydeep Sheth
    Posted on July 14, 2015 at 11:50 Permalink

    HI. How to change size of the “up” and “down” images, I am using “rounded” theme. anybody can suggest? thanks in advance.

  29. Vibin
    Posted on July 13, 2015 at 10:10 Permalink

    I got error – ‘Uncaught TypeError: Cannot read property ‘offsetTop’ of undefined’
    when updating mscrollbar with ajax content.
    Please help.

  30. Suci
    Posted on July 7, 2015 at 09:25 Permalink


    I posted the following in one of the old comment thread reply. But looks like it was missed out. Hence posting it in a fresh thread.

    Thank you for your initial help in solving a few implementation issues earlier.

    Is there a way out to initiate (the scroll) the custom scroller on the page, based on mouse cursor movement towards left & right part of the page body? Kind of using the scroller on full page-width.

    If there are any examples on that, Iโ€™d love to refer the same.

    I referred to this but could not make the customscroller scroll based on that. Sorry for my poor coding skills.



Comments pages: 1 65 66 67 68 69 84

Post a comment

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

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