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

jQuery custom content scroller



  • Jul 11, 2016
    • Updated plugin to version 3.1.5

      • Fixed issues #427, #416, #430.
      • Extended :mcsInSight plugin expression.
  • Jun 13, 2016
    • Updated plugin to version 3.1.4

      • Added new jQuery custom expression: ":mcsInSight".
      • Changed jQuery .load() functions for compatibility with jQuery version 3.0.
      • Increased mousewheel deltaFactor threshold which determines delta acceleration.
      • Optimized the function that checks the accessibility if iFrames.
      • Fixed issue #383.
      • Fixed issue regarding scrollTo method percentage value.
      • Fixed issue #391 (Firefox console error when dragging the scrollbar outside of window).
  • Nov 17, 2015
    • Updated plugin to version 3.1.3

      • Fixed issues regarding cross-domain iframes.
  • Nov 10, 2015
    • Updated plugin to version 3.1.2

      • snapAmount option can now be an array for setting different vertical and horizontal values (e.g. [y,x]).
      • Fixed issues regarding scrollbar dragging when element is within an iFrame.
      • New option added: extraDraggableSelectors.
      • Fixed issue #321.
      • Updated auto-update and primary scrolling functions to fix a bug regarding horizontal scrollbar resizing.
  • Oct 27, 2015
    • Updated plugin to version 3.1.1

      • New option added: documentTouchScroll.
      • Fixed bug ( regarding horizontal scrollbar dragging not triggering immediately.
      • Fixed a minor conflict between clicking the dragger rail while snapAmount option is used.
      • Fixed an issue regarding CSS max-height and media queries.
      • Optimized/fixed mouse-wheel scrolling on OSX (esp. using magic trackpad/mouse).
      • Included the latest version (3.1.13) of jquery-mousewheel plugin.
  • Oct 7, 2015
    • Updated plugin to version 3.1.0

      • Changed updateOnImageLoad option default value so it’s not triggered on vertical content.
      • Extended autoExpandHorizontalScroll option.
      • Updated/optimized auto-update function to prevent memory leak.
      • New callbacks added: onCreate, onBeforeUpdate.
      • Fixed issue #353 ( regarding Ms Edge and IE on touch devices.
      • Fixed issue regarding dragging text or elements out of the scrollable area (
      • Plugin is now better at handling CSS flexbox and elements with max-height using CSS calc().
  • Jun 9, 2015
    • Updated plugin to version 3.0.9

      • Pulled request #297 (fix Timers leaks –
      • Auto-detect OSX “natural” scrolling setting (where supported) and invert mouse-wheel automatically (for Safari browser).
      • New option added: autoUpdateTimeout.
      • Fixed issue #303 ( regarding mobile Google Chrome.
  • Mar 10, 2015
    • Updated plugin to version 3.0.8

      • Added Browserify support (
      • Fixed touch-swipe and keyboard scrolling for iframes (
  • Dec 29, 2014
    • Updated plugin to version 3.0.7

      • Fixed issue regarding scrolling by touch-swiping content in touch-enabled Windows devices.
      • Fixed bug regarding page scrolling when touch-swiping content with scrollbars in Android OS.
      • Setting alwaysShowScrollbar option to 1 will now keep scroll buttons visible.
      • Fixed issue
  • Nov 30, 2014
    • Updated plugin to version 3.0.6

      • Changed the timeout of binding the mouse-wheel event from 1000 to 100 milliseconds.
      • Fixed a minor issue regarding iframes in Firefox (
      • Change included mousewheel plugin version to 3.1.12.
      • Fixed/optimized various private functions.
      • New option added: scrollButtons:{ tabindex }.
      • New callbacks added: onUpdate, onImageLoad and onSelectorChange.
      • Added new custom jQuery expressions: ":mcsInView" and ":mcsOverflow".
      • Fixed scrolling while selecting content (
  • Oct 21, 2014
    • Updated plugin to version 3.0.5

      • Updated touch-swipe scrolling functionality. For example, the script will not prevent document scrolling when swiping vertically on elements with horizontal scrollbar or prevent zooming when 2 fingers are detected.
      • Updated the script to allow using browser’s “find on page” functionality.
      • Fixed issues regarding RequireJS.
      • New callback added: onInit (triggers when the scrollbars have initialized).
      • New option added: advanced:{ releaseDraggableSelectors }.
      • Updated script’s custom js tween function.
  • Sep 6, 2014
    • Updated plugin to version 3.0.4

      • Fixed issue of scrolling being too fast on OSX trackpads (issue:
      • Added mouse-wheel support for IE/Firefox over iframes that allow access.
      • Added option timeout to scrollTo method in order to easily change scroll-to default 60 milliseconds delay.
      • New callbacks added: onOverflowY, onOverflowX, onOverflowYNone and onOverflowXNone.
      • The plugin script will initialize mcs object without the need to trigger callbacks first.
  • Jul 29, 2014
    • Updated plugin to version 3.0.3

      • Added css and image files to main in bower.json file (
      • Added support for RequireJS (
      • Added an extra condition which checks if the scrollbar is ready to use mousewheel events (
  • May 30, 2014
    • Updated plugin to version 3.0.2

      • Fixed issue regarding scrolling over focused select element (
  • May 30, 2014
    • Updated plugin to version 3.0.1

      • Development script jquery.mCustomScrollbar.js appends jquery mousewheel plugin script in head tag (instead of body).
      • Removed jQuery object .selector property (issue: Object.selector will be used (if it exists) only when live option is true and liveSelector option is not set.
      • New option parameter added: liveSelector (specify a selector for the live option).
  • May 21, 2014
    • Updated plugin to version 3.0.0

      • Changed license to MIT
      • Re-written/optimized code.
      • Script adds scrollbars automatically on any element with class mCustomScrollbar.
      • Added object for detecting if custom scrollbar script is loaded: window.mCustomScrollbar.
      • Added object to allow setting plugin default options, e.g. $.mCustomScrollbar.defaults.scrollInertia=500;.
      • Changed set_width and set_height options to setWidth and setHeight.
      • Changed horizontalScroll option to axis.
      • New option parameter added: scrollbarPosition.
      • Dragger rail click scroll amount changed to match browser’s native scrollbar behavior.
      • Fixed problems with scroll on input focus (issue:
      • New option parameter added: deltaFactor.
      • Deprecated mouseWheelPixels, scrollButtons:{scrollSpeed}, advanced:{normalizeMouseWheelDelta} options.
      • Fixed issues and enhanced content touch-swipe scrolling function.
      • Fixed IE8 issue: content gets selected upon scroll
      • Added keyboard scrolling support.
      • Extended alwaysShowScrollbar option parameter.
      • New option parameters added: setTop and setLeft.
      • Extended scrollTo method position parameter.
      • Extended and fixed mcs variable (issue:
      • Callbacks won’t trigger when scrolling is 0 or 100%.
      • Removed window resize events and options.
      • Added support for RTL direction.
      • New option parameter added: alwaysTriggerOffsets.
      • New option parameter added: autoExpandScrollbar.
      • Added more ready-to-use themes.
      • New option parameter added: live.
      • New option parameter added: mouseWheel:{ invert }.
      • New option parameter added: advanced:{ updateOnSelectorChange }.
      • New option parameter added: advanced:{ updateOnImageLoad }.
      • Changed"mCS_trigger") to"mCS").trigger
  • May 19, 2014
    • Updated plugin to version 2.8.7

      • Increased mouse-wheel “auto” scrolling amount.
      • Fixed scrollbar dragging over iframes.
      • Fixed sub-pixels related issues.
  • May 14, 2014
    • Updated plugin to version 2.8.6

      • Fixed timeouts/intervals not clearing when scrollbar is destroyed (
      • Added extra condition preventing multiple plugin instantiations on a single element.
  • May 8, 2014
    • Updated plugin to version 2.8.5

      • Optimize scrolling when trackpad is used (issue:
      • scroll to element by js/jquery element object (issue:
      • Watch content size as well as container size (issue:
      • Change max-height function to take into consideration any padding applied to the DIV container (issue:
      • Fix window resize (issue:
      • Small bugfix and Mousewheel version update (issue:
      • Add ondragstart/ondragstop event handlers (issue:
  • Nov 19, 2013
  • May 9, 2013
    • Updated plugin to version 2.8.2

      • Plugin license changed from GPL to L-GPL.
      • Merged pull request which adds few extra options that allow a better scrollbar snapping to multiples of number of pixels.
  • Mar 13, 2013
    • Updated plugin to version 2.8.1

      • Plugin license changed from CC to GPL.
      • Fixed few minor bugs and issues.
  • Mar 7, 2013
    • Updated plugin to version 2.8

      • Removed GSAP dependencies. Plugin does not require GSAP JS TweenLite/CSSPlugin anymore.
      • Fixed CSS file for horizontal/vertical nested scrollbars.
      • New option parameter added: normalizeMouseWheelDelta (normalizes mouse-wheel delta to -1/1).
      • New option parameter added: contentTouchScroll (scrolling by touch-swipe content).
      • Script unbinds window resize event for destroyed scrollbars.
  • Feb 22, 2013
    • Fixed an issue with max-height/width.
  • Feb 20, 2013
    • Updated plugin to version 2.7

      • Removed jQuery UI dependency. Plugin does not require jQuery UI anymore.
      • Added support for jQuery version 1.9
      • Added support for Microsoft Windows based touch devices (via MSPointer events).
      • Added support for nested scrollbars (any amount, any level).
      • Custom scrollbars can now be applied directly on body tag.
      • Added GSAP JS TweenLite & CSSPlugin dependencies. All animations in the script have moved from jQuery $.animate to GSAP JS TweenLite. Scrolling is much smoother and performance is significantly better (at least twice the FPS). Callback functions also perform much better (with less code).
      • Dragger bar has now the same animation easing effect as content.
      • New method added: stop (stops current running scrolling animations).
      • New option parameter added: autoHideScrollbar (hides scrollbar when idle and/or mouse-out).
      • Mouse-wheel scrolls the document when a custom scrollbar has reached its scrolling limits (same behavior as browser native scrollbars).
      • Mouse-wheel and scrolling buttons default speed is set to "auto" (script auto-adjusts pixels scrolling amount according to content’s length).
      • Setting CSS max-height/max-width in percentages bug is fixed.
      • All callback functions return the following values: this (the current element), (content’s top position), mcs.draggerTop (scrollbar dragger’s top position), mcs.left (content’s left position), mcs.draggerLeft (scrollbar dragger’s top position), mcs.topPct (content vertical scrolling percentage), mcs.leftPct (content horizontal scrolling percentage).
      • Added scrollInertia option parameter to scrollTo method (set your own scrollInertia values for each scrollTo call).
      • Added a number of ready-to-use scrollbar themes. You can easily select a theme by setting the theme option parameter to the one you want.
      • Updated jquery.mCustomScrollbar.css with themes and some minor CSS changes for .mCSB_draggerContainer.
      • Other minor code optimizations and bug fixes.
  • Dec 19, 2012
    • Fixed code for elements with max-height/width.
  • Nov 28, 2012
    • Added content touch-scrolling support.
  • Nov 26, 2012
    • Updated plugin to version 2.3

      • Added touch support to custom scrollbar so it looks and functions the same on all devices (desktops, laptops, tablets, phones etc.) which support javascript touch events.
      • New methods added: disable (temporarily disables the scrollbar) and destroy (completely removes the scrollbar).
      • Auto-scrolling on element focus can now be enabled/disabled via option parameter.
      • Changed mousewheel and buttons scrolling to a fixed pixels amount (same behavior as native scrollbars).
      • Setting CSS max-height/max-width (without height/width) applies the custom scrollbar correctly when max-value is reached.
      • New callbacks added: onScrollStart, onTotalScrollBack and whileScrolling.
      • Changed few data objects names.
      • Other minor code optimizations.
  • Nov 7, 2012
    • Added top limit for scrollTo method.
  • Jul 27, 2012
    • Fixed an issue regarding content position updating. Updated plugin to version 2.1.
  • Jul 24, 2012
    • Added support for Android version 2.xx plus minor code optimizations.
  • Jul 19, 2012
    • Changed auto-scroll to selected/active anchors, only if they have a tabindex attribute set.
  • Jul 14, 2012
    • Updated plugin to version 2.0

      • Plugin script completely re-written to support multiple selector types, option parameters and methods.
      • Added user defined custom callback functions.
      • Added support for touch devices.
      • Fix for fast scrolling bug on Safari (OSX) is now included in the plugin script.
      • Added scroll-to functionality via “scrollTo” method.
      • Updated scroll buttons to scroll continuously or by number of pixels.
      • Added some advanced parameters for auto-updating scrollbar on content resize and auto-expanding container width on horizontal content blocks.
      • Added update method to update scrollbars manually when necessary.
      • Fixed scrolling while page is zoomed in or out in webkit browsers.
      • Selecting elements with the TAB key auto-scrolls content to the selected element position.
      • Included additional demos and examples in the plugin archive.
  • Dec 14, 2011
    • Updated demo and download archive with the updated mousewheel plugin (version 3.0.6), in order for mousewheel to work with jquery 1.7
  • Apr 13, 2011
    • Fixed a bug regarding pressing-dragging-releasing scroll buttons
  • Feb 23, 2011
    • Automatically setting content width for horizontal scrollers is no longer calculated via javascript.
      Instead of using jQuery .each() or for statements, the width is now set by adding an additional div (.horWrapper) that wraps content and by setting the display of .container div to inline, expanding its width automatically (check the updated css file for details)


Pages: 1 2 3 4


Post a comment

Comments pages: 1 78 79 80

  1. whizkid
    Posted on August 13, 2017 at 15:14 Permalink

    I am using your scrollbars well. Thank you,

    By the way, in your service’s mobile page, your scrollbars “touch & scroll” does not seem to work well.

    Could you visit my page and check it by mobile?

    There is a problem with “#mCSB_1”.

  2. rizwan
    Posted on August 13, 2017 at 08:05 Permalink

    how to set scrollbarposition:”outside” via html data attribute???????
    what is the data-attribute value?

  3. El-Mahbub
    Posted on August 11, 2017 at 23:27 Permalink

    Very awesome, very fantastic, i like your plugin, this.

  4. Joop
    Posted on August 6, 2017 at 16:15 Permalink

    First of all, thank you for your perfect plugin. Great work!

    I would like to change the cursor for .mCSB_dragger_bar to ‘grab’ / ‘grabbing’, but could not find a solution.
    Could you give me one?

  5. Jack
    Posted on August 6, 2017 at 14:48 Permalink

    First of all, thank you for your perfect plugin. Great work!

    I would like to change the cursor for .mCSB_dragger_bar to ‘grab’ / ‘grabbing’, but could not find a solution.
    Could you give me one?

  6. ساخت و طراحی سایت
    Posted on August 3, 2017 at 10:25 Permalink

    I used this scrollbar in some parts of my website that you can see and test its usage.

  7. خرید هاست ارزان
    Posted on August 3, 2017 at 10:22 Permalink

    this is the easiest and most useful scrollbars that I used !

  8. Quy Tran
    Posted on July 19, 2017 at 10:55 Permalink

    Thank you, i will try your plugin

  9. Danesh
    Posted on July 18, 2017 at 17:33 Permalink

    Awesome. Easy to use.

  10. ujwol
    Posted on July 12, 2017 at 22:09 Permalink

    can we put horizontal scrollbar at top and bottom both ?

  11. Valdemar
    Posted on July 11, 2017 at 17:38 Permalink

    Hi! Can I disable event ‘mousewheel’ to make a some pause. Or how I can get original event? Thank you!

  12. davy
    Posted on July 5, 2017 at 15:32 Permalink

    In the windows system in the implementation of the onTotalScroll (scroll down to the bottom), there will be delays, not at this time, Loading effect set, wait for a few seconds, will perform data request (when the rolling load of fabric will appear in this BUG) but this kind of phenomenon does not appear in the Mac, the loading effect will appear normal, who can help me solve this problem, thank you very much

  13. ujwol
    Posted on June 30, 2017 at 20:19 Permalink

    I applied above custom scrollbar to the table which have lots of row and column drag and drop features. but after applying this scrollbar I my drag and drop is not working on mobile device. any idea ?

  14. rajthilak
    Posted on June 14, 2017 at 08:57 Permalink

    I need to implement custom scroll for selectbox with multiple. Is there any way to give it ?

  15. Rikul
    Posted on June 13, 2017 at 14:55 Permalink

    hello i have one problem in this scrollbar..when i add scroll in dropdown its looks perfect but when i dragge scroll on mouse my dropdown closed

  16. Adriano
    Posted on June 9, 2017 at 19:51 Permalink

    Hi, seems that there is a bug when both scroll bars are active (vertical and horizontal) the trackpad horizontal scrolling stop working. Only the vertical one works.

    You can check this in the demo that have both scroll bards:

    Do you think this can be fix in next release? it is a great library, but this issue is a deal breaker…

  17. Anton
    Posted on June 9, 2017 at 16:29 Permalink

    Hello Community,

    i love the Scrollbars and the Work of Manos. Big Respect. 🙂

    But I have a problem related to another javascript application.
    In the footer section, HIGHSLIDE HTML CONTENTS (under OUR SERVICES … important are “online shops” and “print media”) where the content scroller is used. Open the first time the scrollbar, after the close and reopen it does not load anymore.

    I could unsuccessfully reload the whole html page, but this is not really nice.

    How can I eliminate this?

    Here the Page:

    Thanks for your advice.


  18. Rob
    Posted on June 2, 2017 at 14:54 Permalink

    How can I set option to hide scrollbar and show only when my inside elements reach my height?
    Example I have:

    element 1
    element 2
    element 3
    element 4

    #contentwithscroll has set in customscrollbar height to 350px
    I’d like to hide it and show only when elements reach this 350px.
    This are notifications.


    • Rob
      Posted on June 2, 2017 at 14:55 Permalink

      Sorry in previous message I forgot about code tags:

      How can I set option to hide scrollbar and show only when my inside elements reach my height?
      Example I have:
      <ul> <div id="contentwithscroll"> <li>element 1</li> <li>element 2</li> <li>element 3</li> <li>element 4</li> </div>
      #contentwithscroll has set in customscrollbar height to 350px
      I’d like to hide it and show only when elements reach this 350px.
      This are notifications.


  19. G7495x
    Posted on June 2, 2017 at 00:43 Permalink

    Is it possible to change the space between the scrollbar and the content

  20. noob
    Posted on June 1, 2017 at 16:00 Permalink

    I need to change the theme inside a dropdown scrollable menu. How to do it? I was trying to change inside the HTML and the script, but nothing works.
    My idea is to add an update to that scrollbar, but I don’t know how.
    Can you please help me?
    Thank you in advance



    @foreach (var account in Auth.Current.AvailableAccounts)



    the script:
    scrollInertia: 550,
    scrollbarPosition: “outside”,
    theme: “minimal-black”

    the result:
    mCSB_scrollTools mCSB_3_scrollbar mCS-light mCSB_scrollTools_vertical

    • noob
      Posted on June 1, 2017 at 16:06 Permalink

      <div class="account-selector-container"> <div class="dropdown"> <button class="btn btn-default btn-block dropdown-toggle" type="button" id="accountSelector" data-toggle="dropdown"> <span class="pull-left accountname">@Auth.Current.SelectedAccount.Name</span> <span class="caret"></span> </button> <div class=" mCustomScrollbar dropdown-menu scrollable-menu" data-mc-theme="minimal-dark" role="menu" aria-labelledby="accountSelector"> <ul id="accountSelectorDropdown" class="" > @foreach (var account in Auth.Current.AvailableAccounts) { <li role="presentation" class="@(Auth.Current.SelectedAccountId == account.AccountId ? "active" : "")"> <a role="menuitem" tabindex="-1" href="javascript:;" data-accountid="@account.AccountId">@account.Name</a> </li> } </ul> </div> </div> </div>

      • noob
        Posted on June 2, 2017 at 09:38 Permalink

        changed the default theme inside of the original script

  21. Alex
    Posted on May 29, 2017 at 00:19 Permalink

    Hi. I have some problem on android devices with horizontal scroll. Touch events doesn’t work on a document on a content area with custom scrollbar. Though, i don’t have such problems with ios.

    My option for plugin initializathion:

    eventSlider.mCustomScrollbar({ axis:"x", advanced:{ autoExpandHorizontalScroll:true, updateOnImageLoad: false }, contentTouchScroll: true, documentTouchScroll: true });

    Help me please)))

    • Serzhei
      Posted on June 1, 2017 at 13:41 Permalink

      css style:
      .mCustomScrollbar{ -ms-touch-action: inherit; touch-action: inherit; /* MSPointer events – direct all pointer events to js */ }
      .mCustomScrollbar.mCS_no_scrollbar{ -ms-touch-action: inherit; touch-action: inherit; }

      • Alex
        Posted on June 1, 2017 at 23:58 Permalink

        Thank you so much!!! It works!

      • Vincent
        Posted on June 29, 2017 at 17:38 Permalink

        Yes, thanks a million. Working just fine with css.

      • Sreejith
        Posted on August 13, 2017 at 12:08 Permalink

        Thanks.. Works Great..

  22. هاست رایگان
    Posted on May 9, 2017 at 12:57 Permalink

    thank you very much
    this post is very nice
    thank you

  23. Dave
    Posted on May 7, 2017 at 16:15 Permalink

    I love your scroller – I just had a question if you think users can PAN inside the scrolled DIV by JUST PRESSING ONCE on the scrollable region and moving the scrollable content with one the finger – without having to switch back and forth between the upper and lower scroll bars?
    Thanking you for your fantastic product!

  24. Shandy Elliott
    Posted on April 27, 2017 at 05:18 Permalink

    It appears that the scrollbar is coded to only appear if the height of its content is EQUAL to or GREATER than its parent container (which seems appropriate by default). I have a situation where I only want the scrollbar to appear if its content is GREATER than its parent; if content and parent are equal in height, then I do not want the scrollbar to appear. I could explain why I want this behavior, but it’s not really material to the question.

    How can I script the scrollbar to ONLY appear if its content is GREATER than its parent (not EQUAL)?


Comments pages: 1 78 79 80

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>