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
    • //cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js
    • //cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css
    • //cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/mCSB_buttons.png
  • Github latest/minified
    • //malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js
    • //malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css
    • //malihu.github.io/custom-scrollbar/mCSB_buttons.png


HTML

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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

CSS

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.

Initialization

Initialize via javascript

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

<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

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:

$("#content-1").mCustomScrollbar();

You may also have multiple selectors by inserting comma separated values

$(".content,#content-1").mCustomScrollbar();

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

<script>
  (function($){
    $(window).on("load",function(){
      $("#vertical-content").mCustomScrollbar({
        theme:"light-3",
        scrollButtons:{
          enable:true
        }
      });
      $("#horizontal-content").mCustomScrollbar({
        axis:"x",
        theme:"3d"
      });
    });
  })(jQuery);
</script>

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 -->
</div>

Basic configuration & option parameters

axis

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

$(".content").mCustomScrollbar({
    axis:"x" // horizontal scrollbar
});
$(".content").mCustomScrollbar({
    axis:"yx" // vertical and horizontal scrollbar
});

theme

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:

$(".content").mCustomScrollbar({
    theme:"dark"
});

Configuration

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

  • 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.
Default:
"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.
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"
callbacks:{
      onCreate: function(){}
}
A function to call when plugin markup is created.
Example:
callbacks:{
    onCreate:function(){
      console.log("Plugin markup generated");
    }
}
callbacks:{
      onInit: function(){}
}
A function to call when scrollbars have initialized (demo).
Example:
callbacks:{
    onInit:function(){
      console.log("Scrollbars initialized");
    }
}
callbacks:{
      onScrollStart: function(){}
}
A function to call when scrolling starts (demo).
Example:
callbacks:{
    onScrollStart:function(){
      console.log("Scrolling started...");
    }
}
callbacks:{
      onScroll: function(){}
}
A function to call when scrolling is completed (demo).
Example:
callbacks:{
    onScroll:function(){
      console.log("Content scrolled...");
    }
}
callbacks:{
      whileScrolling: function(){}
}
A function to call while scrolling is active (demo).
Example:
callbacks:{
    whileScrolling:function(){
      console.log("Scrolling...");
    }
}
callbacks:{
      onTotalScroll: function(){}
}
A function to call when scrolling is completed and content is scrolled all the way to the end (bottom/right) (demo).
Example:
callbacks:{
    onTotalScroll:function(){
      console.log("Scrolled to end of content.");
    }
}
callbacks:{
      onTotalScrollBack: function(){}
}
A function to call when scrolling is completed and content is scrolled back to the beginning (top/left) (demo).
Example:
callbacks:{
    onTotalScrollBack:function(){
      console.log("Scrolled back to the beginning of content.");
    }
}
callbacks:{
      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.
callbacks:{
      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.
callbacks:{
      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.
callbacks:{
      onOverflowY: function(){}
}
A function to call when content becomes long enough and vertical scrollbar is added.
Example:
callbacks:{
    onOverflowY:function(){
      console.log("Vertical scrolling required");
    }
}
callbacks:{
      onOverflowX: function(){}
}
A function to call when content becomes wide enough and horizontal scrollbar is added.
Example:
callbacks:{
    onOverflowX:function(){
      console.log("Horizontal scrolling required");
    }
}
callbacks:{
      onOverflowYNone: function(){}
}
A function to call when content becomes short enough and vertical scrollbar is removed.
Example:
callbacks:{
    onOverflowYNone:function(){
      console.log("Vertical scrolling is not required");
    }
}
callbacks:{
      onOverflowXNone: function(){}
}
A function to call when content becomes narrow enough and horizontal scrollbar is removed.
Example:
callbacks:{
    onOverflowXNone:function(){
      console.log("Horizontal scrolling is not required");
    }
}
callbacks:{
      onBeforeUpdate: function(){}
}
A function to call right before scrollbar(s) are updated.
Example:
callbacks:{
    onBeforeUpdate:function(){
      console.log("Scrollbars will update");
    }
}
callbacks:{
      onUpdate: function(){}
}
A function to call when scrollbar(s) are updated.
Example:
callbacks:{
    onUpdate:function(){
      console.log("Scrollbars updated");
    }
}
callbacks:{
      onImageLoad: function(){}
}
A function to call each time an image inside the element is fully loaded and scrollbar(s) are updated.
Example:
callbacks:{
    onImageLoad:function(){
      console.log("Image loaded");
    }
}
callbacks:{
      onSelectorChange: function(){}
}
A function to call each time a type of element is added, removed or changes its size and scrollbar(s) are updated.
Example:
callbacks:{
    onSelectorChange:function(){
      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).

update

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 */
$(selector).mCustomScrollbar({
  advanced:{
    updateOnContentResize: false,
    updateOnImageLoad: false
  }
});

/* at some point in your js script/code update scrollbar manually */
$(selector).mCustomScrollbar("update");

scrollTo

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″

$(selector).mCustomScrollbar("scrollTo","#el-1");

Scroll to top

$(selector).mCustomScrollbar("scrollTo","top");

Scroll by 100 pixels down or right

var val=100;
$(selector).mCustomScrollbar("scrollTo","-="+val);

Scroll by 100 pixels up or left

$(selector).mCustomScrollbar("scrollTo","+=100");

Scroll by 100 pixels down and by 50 pixels right

$(selector).mCustomScrollbar("scrollTo",["-=100","-=50"]);

Scroll to the fifth paragraph

$(selector).mCustomScrollbar("scrollTo",$("p:eq(4)"));

Scroll to the last element within your content

$(selector).mCustomScrollbar("scrollTo","last");

Scroll to some variable value

var val=document.getelementbyid("element-id");
$(selector).mCustomScrollbar("scrollTo",val);

Scroll to 300 pixels

$(selector).mCustomScrollbar("scrollTo",300);

Method options

scrollInertia: integer
Scroll-to duration, value in milliseconds.
Example:
$(selector).mCustomScrollbar("scrollTo","bottom",{
    scrollInertia:3000
});
scrollEasing: "string"
Scroll-to animation easing, values: "linear", "easeOut", "easeInOut".
Example:
$(selector).mCustomScrollbar("scrollTo","bottom",{
    scrollEasing:"easeOut"
});
moveDragger: boolean
Scroll scrollbar dragger (instead of content).
Example:
$(selector).mCustomScrollbar("scrollTo",80,{
    moveDragger:true
});
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:
$(selector).mCustomScrollbar("scrollTo","top",{
    timeout:1000
});
callbacks: boolean
Trigger user defined callbacks after scroll-to completes.
Example:
$(selector).mCustomScrollbar("scrollTo","left",{
    callbacks:false
});

stop

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

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

disable

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

$(selector).mCustomScrollbar("disable",true);

view examples

/* initialize plugin */
$(selector).mCustomScrollbar();

/* at some point in your js script/code disable scrollbar */
$(selector).mCustomScrollbar("disable");

/* re-enable scrollbar as needed */
$(selector).mCustomScrollbar("update");

destroy

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 */
$(selector).mCustomScrollbar();

/* at some point in your js script/code destroy scrollbar */
$(selector).mCustomScrollbar("destroy");

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:

$(selector).mCustomScrollbar({
  theme:"dark"
});

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

$(selector).mCustomScrollbar({
    theme:"my-theme"
});

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

$(".content").mCustomScrollbar({
    callbacks:{
        onScroll:function(){
            myCustomFn(this);
        }
    }
});

function myCustomFn(el){
    console.log(el.mcs.top);
}

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

$(".content").mCustomScrollbar({
    callbacks:{
        onTotalScroll:function(){
            console.log("scrolled to bottom");
        },
    onTotalScrollOffset:100
    }
});

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).

$(".content").mCustomScrollbar({
    callbacks:{
        onTotalScroll:function(){
            console.log("scrolled to bottom");
        },
    onTotalScrollOffset:100,
    alwaysTriggerOffsets:false
    }
});

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
  • 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)

view examples

Load more content when scrolled to bottom

$(selector).mCustomScrollbar({
    callbacks:{
        onTotalScroll:function(){
            this.mcs.content.append("...");
        }
    }
});

Run code when at least half of the content is scrolled

$(selector).mCustomScrollbar({
    callbacks:{
        whileScrolling:function(){
            var pct=this.mcs.topPct;
            if(pct>=50){
              /* do something... */
            }
        }
    }
});

Plugin-specific jQuery expressions

$("#myID:mcsInView")
Select element(s) in your content that are within scrollable viewport.
As condition: $("#myID").is(":mcsInView");
$(".content:mcsOverflow")
Select overflowed element(s) with visible scrollbar.
As condition: $(".content").is(":mcsOverflow");
$("#myID:mcsInSight")
$("#myID:mcsInSight(exact)")
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

License

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

Pages: 1 2 3 4


5,618 Comments

Post a comment

Comments pages: 1 75 76 77 78 79 84

  1. Emmanuel
    Posted on September 6, 2016 at 16:19 Permalink

    After hide and show transition (using display or jquery hide/show functions) the scroll does not recover its state.
    Trying to force state recovery using “update” method fails.
    The only way seems to be to call “scrollTo” method using mcs.top data.

    See whole html/js demo:

    XXXXXXXXXXXXXXXXXX
    XXXXXXXXXXXXXXXXXX

    $(“#View”).mCustomScrollbar({callbacks: {onScroll: function() { /*alert( this.mcs.top) */ } } });

    function scroll() {$(“#View”).mCustomScrollbar(“scrollTo”, 750) }
    function hide() { $(“#View”).css(‘display’, ‘none’) }
    function show() { $(“#View”).css(‘display’, ‘block’) }
    function update() {
    /*$(“#View”).mCustomScrollbar(“update”);*/
    var mcs=$(“#View”).get(0).mcs;
    $(“#View”).mCustomScrollbar(“scrollTo”, -mcs.top);
    }

    window.setTimeout(scroll, 2000);
    window.setTimeout(hide, 4000);
    window.setTimeout(show, 6000);
    window.setTimeout(update, 8000);

    Reply
    • Emmanuel
      Posted on September 6, 2016 at 16:22 Permalink

      <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="/scripts/jquery.mCustomScrollbar.concat.min.js"></script> <link type="text/css" rel="stylesheet" href="/styles/jquery.mCustomScrollbar.min.css"> </head> <body style="background-color: darkBlue"> <div id="View" style="margin:50px; width:400px; height:200px"> <div id="Container" style="width:400px; color:white; background-color:darkGreen"> <p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p> <p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p><p>X</p> </div> </div> <script type="text/javascript"> $("#View").mCustomScrollbar({callbacks: {onScroll: function() { /*alert( this.mcs.top) */ } } }); function scroll() {$("#View").mCustomScrollbar("scrollTo", 750) } function hide() { $("#View").css('display', 'none') } function show() { $("#View").css('display', 'block') } function update() { /*$("#View").mCustomScrollbar("update");*/ var mcs=$("#View").get(0).mcs; $("#View").mCustomScrollbar("scrollTo", -mcs.top); } window.setTimeout(scroll, 2000); window.setTimeout(hide, 4000); window.setTimeout(show, 6000); window.setTimeout(update, 8000); </script> </body> </html>

      Reply
      • malihu
        Posted on September 19, 2016 at 22:13 Permalink

        Hi,

        You need to store (e.g. in a js variable) the scroll position value before you hide the scrollbar. For example:

        var scrollPosition; function scroll() { $("#View").mCustomScrollbar("scrollTo", 750); scrollPosition=750; } function update() { $("#View").mCustomScrollbar("scrollTo", scrollPosition); }

        Reply
  2. Benjamin
    Posted on September 6, 2016 at 13:02 Permalink

    Hello, thank you very much for this very nice plugin!

    I’m working on a project that requires a scrollbar with dynamic content loaded into it including dropdown menus.

    It works great in desktop view and everything is working fine. However, when viewing it with a tablet it’s possible to continue scrolling past the content for some reason. Any help will be greatly appreciated. Thank you!

    Reply
  3. xiangji
    Posted on September 5, 2016 at 13:19 Permalink

    hi,
    i met a problem,and i publishded it to the Stackoverflow.how can I solve this problem?thanks!
    http://stackoverflow.com/questions/39327938/mcustomscrollbar-plugin-a-bug-here

    Reply
  4. xiangji
    Posted on September 5, 2016 at 09:00 Permalink

    hi,
    there’s one parent div added mCustomScrollbar,and it’s child also added mCustomScrollbar.now when I click a tag at the bottom of the child div,the parent div would suddenly jump like an anchor link.how can I solve this problem?
    thanks.

    Reply
  5. neha
    Posted on September 3, 2016 at 07:50 Permalink

    When page is refreshed this scrollbar doesn’t work 🙁

    Reply
  6. Mehul
    Posted on August 30, 2016 at 14:05 Permalink

    I need to custom scroll by mouse move event in desktop view.

    Reply
  7. Manoj
    Posted on August 29, 2016 at 03:46 Permalink

    Hi, I’m having a problem with the custom scroll bar.

    I have a structure like this:

    When I set it to

    Reply
    • Manoj
      Posted on August 29, 2016 at 03:52 Permalink

      sorry my question got posted when i accidentally pressed tab and space.

      Actual question:

      I have a structure like this:

      Parent div (height: 100%)

      child div (height 33%)
      child div
      child div

      I want the scroll bar on the parent div.
      And the child divs to be elements which when exceeding 3 should allow a vertical scroll on the parent.

      The problem is, when I add the custom scroll, it is adding a div in between the parent and child Divs with class “.mCSB_container ” and a height :auto.

      This div prevents my child Divs from inheriting the height of 33% of the parent Div, and instead their height property becomes unusable.

      What should I do ? . I do not want to use pixel valued heights for the cihld Divs.

      Reply
      • Manoj
        Posted on August 29, 2016 at 04:00 Permalink

        if this helps:

        I changed the height from auto to 100% in the css file for .mCSB_container, the child divs inherit the height properly, BUT the scroll stopped working completely.

        Reply
  8. Shane
    Posted on August 26, 2016 at 19:57 Permalink

    Is there any way to implement this scrollbar without it overriding the scroll event?

    Reply
  9. soft-master
    Posted on August 26, 2016 at 11:50 Permalink

    there is possibility that scroller follows element? so that this element is always in the focus remains? I have a sort animation and will the selected element, not go away and stay always in focus.

    Reply
  10. Master DJon
    Posted on August 24, 2016 at 01:45 Permalink

    I’m trying to use your great scrollbar by having only the two arrows, centered on each side of the content.

    I already did something, but there is a lot of issues, maybe you already went through this ?

    So for horizontal one :

    One of the problems is to have the content no showing over the arrows. I tried to add margin, padding to different elements, nothing worked.

    Thank you for your assistance. I think, when this will be completed, it could be added on this site as this is something really useful.

    Reply
    • Master DJon
      Posted on August 24, 2016 at 01:47 Permalink

      The horizontal example did not show.

      Reply
      • Master DJon
        Posted on August 24, 2016 at 01:48 Permalink

        Still not!!!

        LEFT-ARROW MY-CLICKABLE-CONTENT RIGHT-ARROW

        Reply
  11. Umar Draz
    Posted on August 22, 2016 at 07:14 Permalink

    Hello I am using this plugin on my site

    my content

    Now I want to show overflow on hover only would you please help me how I can do this?


    umar

    Reply
  12. Unlimited
    Posted on August 19, 2016 at 10:18 Permalink

    Hi,

    Can I somehow save position of scrollbar when I make “display:none”? Now it resets all values to 0, which I don’t want, I want it to save its old position, so when I show it again it would be at the same place.

    Thanks.

    Reply
  13. str8tohell
    Posted on August 12, 2016 at 13:30 Permalink

    I tried to combine it with select2 but for some reason mouse wheel does not work no matter what I try 🙁
    see

    Reply
  14. Sathyananth
    Posted on August 10, 2016 at 18:01 Permalink

    Hi Malihu,

    My requirement is to scroll page by page on clicking the scroll up or down button.
    But the heights of the pages are unequal. So, if the button allows to call the user defined function, i can scroll the page by calling “scrollto” function with the height of the page in pixel or i can set the focus to any element in the page that i want to scroll to.

    So, I want to use the scroll button to call my functions instead of scrolling the dragger. Is that possible?

    Reply
  15. R3try
    Posted on August 10, 2016 at 16:36 Permalink

    Hi, malihu! I tried to use your plugin like this:
    HTML:
    <div id="ImageContainer"> @foreach (var item in Model.ImagesProfile) { <a href="/ImageProfile/ViewImage/@item.Id"><img style="width: auto; height: auto;max-width: 120px;max-height: 140px" class="img-rounded" src="@item.Url" hspace="10" /></a> } </div>

    JQuery:
    $(document).ready(function () { $('#ImageContainer').mCustomScrollbar({ axis: "x", theme: "dark-thin" }); });

    Reply
    • R3try
      Posted on August 10, 2016 at 16:38 Permalink

      But the doesn’t convert to scroller.

      Reply
  16. Paul
    Posted on August 7, 2016 at 18:41 Permalink

    Hi! thanks for sharing this great tutorial. I”m using it for a website and it’s working very well, but I have a problem.
    I’m also using this :

    $(“.image”).click(function(e){
    var id = $(e.currentTarget).attr(“id”);
    var page = “#”+id;
    var off = $(page).offset().top-(60);
    $(“html, body”).animate({scrollTop: off},600);

    });

    When I click on an element “.image”, it goes to the top of the page. these elements are in a div Where I added my custom scrollbar, but with it it’s not working anymore, the elements “.image” don’t move. What can I do do to make them work together ?

    Reply
    • malihu
      Posted on August 8, 2016 at 19:31 Permalink

      Hi,

      With the custom scrollbar you need to use plugin’s scrollTo method. For example:

      $(".image").click(function(e){ var to="#"+$(this).attr("id"); //change selector with your element that has the scrollbar $(selector).mCustomScrollbar("scrollTo",to); });

      You can also make your own calculations (like the offset in your code) by using an anonymous function as the position parameter:

      $(".image").click(function(e){ var pos=$(this).position().top; $(selector).mCustomScrollbar("scrollTo",function(){ return pos-60; }); });

      Reply
      • paul
        Posted on August 9, 2016 at 01:47 Permalink

        Thanks a lot !
        working very well !

        🙂

        Reply
  17. Srinivas Guddati
    Posted on August 6, 2016 at 04:44 Permalink

    Hello

    I am using your plugin and am invoking scroll function as part after dynamically adding the html element to the DOM by calling method this.$el.find(‘.users-list’).mCustomScrollbar().

    But in your plugin code, you are using $(“#mCSB_”+d.idx) kind of method that are not giving the element required to add scrollbar. If I change this to $(this).find(“#mCSB_”+d.idx) it is working.

    What can I do in these situations? Any suggestions please?

    Regards,
    Srinivas

    Reply
    • malihu
      Posted on August 8, 2016 at 19:35 Permalink

      I need to see your code in order to help. Which element has the scrollbar?
      Does $el.find('.users-list') exist? Is it unique?

      Reply
  18. nick
    Posted on August 5, 2016 at 18:58 Permalink

    Can I have my scroller re-order based on location in a map? If the centroid changes can it reorder? Or can I set so the images shuffle so the order is not fixed?

    Reply
  19. atul
    Posted on August 3, 2016 at 15:23 Permalink

    how to get the cursor position in the custom scroll bar div, after mousewheel event, for example i am scrolling through wheel without any mouse movement

    Reply
  20. Kevin
    Posted on August 1, 2016 at 18:29 Permalink

    I have a div with a scrollbar on the X axis, but it scrolls horizontally when I’m scrolling down the page. I only want it to scroll horizontally when I explicitly scroll left or right, not as I’m scrolling down the page. I tried passing the mouseWheel:{ axis: “y”} argument, but it is still scrolling horizontally as I scroll down the page. I also don’t want to enable axis: “yx” because I get a vertical scrollbar when I don’t want one. I think the mouseWheel:{ axis: “y”} value should be used whether there are X and Y scrollbars or not. Otherwise, thanks for a great plugin.

    $(".related-items-list").mCustomScrollbar({ axis:"x", autoHideScrollbar: true, documentTouchScroll: true, mouseWheel:{ axis: "y"}, mouseWheel:{ preventDefault: true }, contentTouchScroll: 10, documentTouchScroll: true });

    Reply
    • malihu
      Posted on August 5, 2016 at 22:00 Permalink

      I think you need to set mouse-wheel axis to "x":

      mouseWheel:{ axis:"x" }

      You should also not need preventDefault: true

      Reply
      • Kevin
        Posted on August 9, 2016 at 19:11 Permalink

        Thanks for the reply,

        mouseWheel:{ axis:"x" }

        Changing the mousewheel axis to x does not fix it for me. If I’m scrolling down the page the horizontal bar still scrolls left and right even though I’m scrolling up and down on it. Also, I have the preventDefault set to true to stop Chrome from navigating back a page if someone scrolls too far back on the X axis, which was happening a lot.

        I’ve had to hack around it so now I have a transparent mask element over the area that will allow a user to scroll past the horizontal bar without getting stuck on it and then the mask will fade out if someone hovers over it for 200ms, which will then allow you scroll on the bar. This solution is far from ideal, so if you have a better solution it would be great. Thanks

        Reply
        • George Hozendorf
          Posted on August 17, 2016 at 17:47 Permalink

          Adding mouseWheel:{ axis:”x” } gave me a vertical bar while removing the horizontal bar. Please explain how you created the mask for this newbie. Thanks.

          Reply
          • Kevin
            Posted on August 30, 2016 at 18:21 Permalink

            Sorry for the late reply. I only just saw this. I basically used this:

            var timeoutId; $(document).on("mouseenter", ".filtermask", function() { if (!timeoutId) { timeoutId = window.setTimeout(function() { timeoutId = null; // EDIT: added this line $(".filtermask").hide(); }, 200); } }); $(document).on("mouseleave", ".related-items-list", function() { if (timeoutId) { window.clearTimeout(timeoutId); timeoutId = null; } else { $(".filtermask").show(); } });

            It basically hides a transparent div that I positioned to overlay the scrollable area so if you hover over it for 200ms it signals an intent to use it versus just scroll past it and then when the mouse leaves the underlying scrollable area it puts the mask back over it so you can scroll past it again. As I said it’s far from ideal and I’m still hoping the author comes up with a better solution, but hope that helps…

  21. midean23
    Posted on July 29, 2016 at 12:53 Permalink

    Hello,
    First of all, I would really like to thank you for making this amazing scrollbar available to us!
    Please help me to get Scrollable Table with Fixed Header using your amazing scrollbar?

    i have next table:
    <table> <thead> <tr> <th>First</th> <th>Second></th> <th>Third</th> </tr> </thead> <tbody> <tr> <td>1</td> .... <td>n</td> </tr> <tr> <td>1</td> .... <td>n</td> </tr> .... </tbody> </table>
    i need to fix on top

    P.S. I looked through a lot of pages and have seen many people asking the same question but never received a response, please help, I think it will be helpful to many

    Reply
  22. Frank
    Posted on July 29, 2016 at 02:30 Permalink

    Hi there and thanks for sharing this great tutorial. I have two questions, however, which I was hoping I could get some help with:

    1. Is there any way to apply this scrollbar to a the “body” tag of a page?

    2. I applied the scrollbar to a box of height 56px and it has been glitching. Is there a fix for this issue ?

    Many thanks for your help,

    Best,

    Frank

    Reply
  23. xinyue
    Posted on July 26, 2016 at 16:15 Permalink

    hi:
    /*绑定滚动*/
    bindScroll : function(id, sellMode) {

    $(‘#iframe-main’).contents().find(“#”+id).mCustomScrollbar({

    callbacks:{
    onTotalScroll:function(){

    switch(sellMode) {
    case 1:
    this.page_fix += 1;
    break;
    case 2:
    this.page_float += 1;
    break;
    case 3:
    this.page_taret += 1;
    break;
    }
    this.loadSearchResult(sellMode, 1, 1);
    }
    }

    });

    }

    callback onTotalScroll can’t used;

    Reply
    • malihu
      Posted on July 27, 2016 at 11:32 Permalink

      Which object you want to target with this?
      onTotalScroll callback works but you need to change the this reference in your code. In plugin’s callbacks, this refers to the actual element with the scrollbar.

      Reply
      • Georgi Mirazchiyski
        Posted on July 27, 2016 at 12:50 Permalink

        Hello 🙂

        First of all thank you very much for the convenient plugin!
        I’ve almost always used it for various of my projects BUT with my personal website I found a problem under Microsoft’s IE and Edge browsers if the document mode is above 10, for now we just have 11 as the newest one. it works pretty well on IE9 & 10 but with 11 it is either not scrolling or not showing.

        I will be glad if you know some workaround. Thanks! 🙂

        I’ve just linked my website on the website field so you can see yourself. 🙂

        Reply
        • Georgi Mirazchiyski
          Posted on July 27, 2016 at 12:59 Permalink

          Greetings,

          Nevermind, I just fixed it. Found my problems with IE’s support. It now works like a charm. 🙂

          Thank you ! 🙂

          Wish you the best,
          Georgi

          Reply
  24. Mohan
    Posted on July 21, 2016 at 16:49 Permalink

    The plugin dose not work with ie9 but works with Chrome

    Reply
    • glouglou
      Posted on July 22, 2016 at 12:06 Permalink

      It does work with IE9, and IE8 too (even if the scrollbar is less pretty with IE8)
      You should check if your IE isn’t running with an older document mode. (check this by pressing F12, the dev console will apear and show your current document mode)

      Thanks malihu for your great plugin! :3

      Reply
  25. Abdou Fall
    Posted on July 20, 2016 at 23:17 Permalink

    Very useful plugin, Thanks

    I want to integrate it with ReactJS do you think it possible.

    Thanks

    Reply
  26. Giannis
    Posted on July 19, 2016 at 21:22 Permalink

    i’m trying to understand how to set the scrollbar on the left and the example wasn’t much of help… can you please tell me how to put the scrollbar on the left? thanks

    Reply
    • malihu
      Posted on July 19, 2016 at 22:51 Permalink

      Scrollbar position is set in CSS. You can overwrite the rules in lines 54 and 65 of jquery.mCustomScrollbar.css.

      For example, you can set the vertical scrollbar on the left by adding the following to your CSS:

      /* reset/remove right position so scrollbar appears on left */ .mCustomScrollbar .mCSB_scrollTools{ right: auto; } /* switch margin from right to left */ .mCustomScrollbar .mCSB_inside > .mCSB_container{ margin-right: 0; margin-left: 30px; }

      Reply
  27. Yolon
    Posted on July 19, 2016 at 16:56 Permalink

    So I want to get the scroll position, so from the docs, that would be through onScroll, but I am using es2015, passing the ‘this’ reference as intended in the doc is a challenge??

    How would I go about getting the current scroll position now?

    Reply
    • malihu
      Posted on July 19, 2016 at 20:35 Permalink

      So using this.mcs.top in your code returns undefined?

      In plugin callbacks, this refers to the javascript object, so you could do the same in any way you want:

      onScroll:function(){ var el=document.getElementById("your-element-id"); console.log(el.mcs.top); }

      onScroll:function(){ console.log($("#your-element-id")[0].mcs.top); }

      Reply
      • Yolon
        Posted on July 20, 2016 at 14:17 Permalink

        Essentially I am calling

        class Scroll { constructor(){ $("#element-id").mCustomScrollbar({ onScroll: this.getTop() }); } getTop() { //code } }

        this is referencing my Scroll instance and a call to this.mcs.top is undefined

        and unfortunately a call to

        onScroll: ... var el=document.getElementById("element-id").mcs.top el.mcs.top

        and

        onScroll: ... $("#element-id")[0].mcs.top

        are both undefined.

        It has to do with scope I am guessing?

        Reply
        • malihu
          Posted on July 21, 2016 at 13:43 Permalink

          Hey I think your code is not correct… you miss the callbacks object in mCustomScrollbar function. Your code should be:

          $("#element-id").mCustomScrollbar({ callbacks:{ onScroll: function(){ /* do something... */ } } });

          Reply
  28. Oliver
    Posted on July 15, 2016 at 19:20 Permalink

    Any chance this plugin would work with the jqlite (angularjs) instead of the jquery?

    Reply
    • malihu
      Posted on July 16, 2016 at 00:28 Permalink

      I don’t think so as jqLite lacks a lot of jQuery methods (its scope is basic DOM manipulation).

      Reply
  29. Nicolas
    Posted on July 14, 2016 at 21:28 Permalink

    FYI:
    On a fully working web site using your script, I upgraded jquery to latest 3.1 and downloaded your latest version. Now, on most contents that do not need scrolling because there is sufficient space, the scrollbar always appears. In one of the contents I have, the scrollbar keeps appearing and disappearing, creating a never ending flash effect…
    Any idea?

    Reply
    • Nicolas
      Posted on July 14, 2016 at 21:49 Permalink

      I should add:
      1. This does happen in every browser type I have here (chrome, FF, IE)
      2. The scrollbars are in containers that are themselves in dialog boxes that appear progressively (opening animarion à la colorbox – I use angular material dialog)
      3. As I said previously, in this context it was working totally fine in your script 3.1.3

      Reply
    • malihu
      Posted on July 15, 2016 at 10:11 Permalink

      I can’t reproduce this issue at all. Tested jQuery 3.0 and 3.1 with latest plugin version (3.1.5) with all kinds of content and various methods of show/hide content (jquery, css transitions etc.) and could not replicate this.

      Do you use any options on the scrollbar?

      Is it possible to send me a link with your implementation?

      Reply
      • Nicolas
        Posted on July 15, 2016 at 17:15 Permalink

        I don’t use any particular param for MCS.

        I don’t know how to show you something that is reproducable and I can’t publish what is on my dev machine. I’ll still try to build a page to showcase the issue though.

        In the meantime, I removed the css animation of the dialog and it changed nothing. I also set a timeout to ensure the scrollbar is enabled when everything is stable on the page and it changed nothing.
        Also I was enabling the scrollbar from an angular directive, so I also removed that and just setup MCS with a simple class: changed nothing.

        Another thing: I loaded your latest 3.1.5 and jquery 2.2.3 and there is no issue this time. So this is clearly the mix jquery3+MCS3.1.5 (or 3.1.4) that is problematic (in my context at least).

        Reply
      • Nicolas
        Posted on July 15, 2016 at 17:39 Permalink

        I finally was able to create a test page for you. I’ll send you the info by email.

        Reply
        • Faraz
          Posted on August 16, 2016 at 15:12 Permalink

          Hello Nicolas, have you been able to find the solution?

          Reply
          • Nicolas
            Posted on September 6, 2016 at 18:37 Permalink

            Sorry to have missed your post. No I didn’t find, and although Malihu was able to see the issue on a test page, there is no solution yet. I tried to reach him again by email but got no answer. Since I see that many posts on this page are not answered recently, he may be in vacations or away from the project.

    • Nams
      Posted on September 16, 2016 at 01:25 Permalink

      I have experienced the same on any of the ones that do not need a scroll bar. It jiggles off. This is a real issue I have had

      Reply
  30. Fouziya
    Posted on July 13, 2016 at 14:34 Permalink

    Great plugin. Useful.
    I am going to use this in my application.

    Reply

Comments pages: 1 75 76 77 78 79 84

Post a comment

Cancel reply

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>

css.php