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,622 Comments

Post a comment

Comments pages: 1 67 68 69 70 71 84

  1. Aryan
    Posted on October 11, 2015 at 10:21 Permalink

    Can It be used for scrolling to replace browser scroll bars to scroll website body?

    Reply
  2. Flo
    Posted on October 9, 2015 at 15:48 Permalink

    Hi Malihu,

    Having the following elements

    $(‘#content-1’).mCustomScrollbar({

    });

    And

    $(‘#content-2’).mousewheel(function (event) {
    if (event.deltaX !== 0) {
    event.preventDefault();

    //todo trigger scroll of custom scrollbar
    }
    });

    There is a way to synchronise the two contents in the way that on mousewheel on $(‘#content-2’) the custom scroller from $(‘#content-1’) to be scrolled ?

    I’ve tried with mCustomScrollbar(“scrollTo”, position) and timeout 0, but there is a delay, because the mousewheel action is triggered to many times and the scroll event from custom scroller is triggered from time to time, causing dragger jump back – forward – back – forward … depending on the scroll direction.

    Thanks,
    Flo

    Reply
  3. Vladimir
    Posted on October 9, 2015 at 10:38 Permalink

    Hi Malihu,

    First of all, GREAT job with plugin. It’s working like a charm except one little feature (I don’t want to say bug) that I cannot resolve.

    I have horizontal scroll and when I start dragging ideally horizontally (not moving mouse up or down) nothing happens. Second that mouse change Y position everything is OK.

    Browsers: Firefox, Chrome, IE
    OS: Windows 8.1
    Resolution: 1920 x 1200 (16:10) 24″” monitor

    Reply
  4. Jaydeep
    Posted on October 8, 2015 at 17:03 Permalink

    How to change scrolling amount when I click anywhere draggerRail. I am able to change via button up and down with “scrollButtons:{ scrollAmount: integer }”. But not able to configure while user click anywhere on draggerRail.

    Thanks In advance.

    Reply
    • malihu
      Posted on October 8, 2015 at 18:17 Permalink

      You cannot change the scroll amount of dragger-rail functionality. The animation duration is the same as the scrollInertia option. Do you have a specific behavior in mind?

      Reply
      • Jaydeep
        Posted on October 10, 2015 at 15:53 Permalink

        lets say dragger is between scroll bar, when I click on anywhere in scroll bar line it should scroll only specified pixel like say 400 px. Same thing I did with “scrollButtons:{ scrollAmount: integer }” when I click on up & down button.

        Reply
  5. John
    Posted on October 8, 2015 at 09:57 Permalink

    This is a great plugin, thanks, although I’ve struggled to get it to work as desired. I do have one last problem that I can’t solve. When using chrome, and clicking refresh, the scrollbar changes size and all my content isn’t accessible. No issues in ff anymore, just this one last problem in chrome. Any ideas? I’m using a horizontal scrolling div btw.

    Reply
    • malihu
      Posted on October 8, 2015 at 18:20 Permalink

      I can’t really say why this might happen but have tried using the autoExpandHorizontalScroll option parameter?

      Reply
      • John
        Posted on October 9, 2015 at 21:03 Permalink

        Yeah I’ve tried that and it makes no difference unfortunately. After more testing it appears the problem actually exists intermittently across both browser engines, albeit, more pronounced with webkit. Which leads me to presume the bug is more fundamental with either my use of the plugin, or the plugin itself. I’ve included a link to my site should you have the time to have a look.

        Thanks

        Reply
        • malihu
          Posted on October 11, 2015 at 19:58 Permalink

          I get a console error in your link (“mCustomScrollbar is not a function”). I cannot find plugin’s .js or .css files anywhere in your code…

          Reply
  6. Giovanni Pires da Silva
    Posted on October 7, 2015 at 23:57 Permalink

    Hello! Any useful tip about using your scroller 100% (body tag) with the Waypoints project? ‘Cause of your project needed overwrites, seems Waypoints stop working because of the offsets values. 🙁

    Reply
  7. Pash Ayotunde
    Posted on October 7, 2015 at 14:35 Permalink

    Thanks very much for this, very very very helpful.

    Reply
  8. lopata
    Posted on October 7, 2015 at 11:40 Permalink

    hi!

    Thank you very much for the update!

    I have a new issue now:

    When the div is empty it still display the scroll bar:
    https://gyazo.com/a431aaba3b420cdc49d9429a24427fee

    It wasn’t doing it before, is there a way to avoid this.

    Thank you for your time!

    Reply
    • lopata
      Posted on October 7, 2015 at 12:09 Permalink

      when I do manually
      $(“#mydiv”).mCustomScrollbar(“update”);

      it doesn’t work properly

      Reply
    • malihu
      Posted on October 7, 2015 at 16:27 Permalink

      Do you use the autoExpandHorizontalScroll option? If yes, can you set its value to 2?

      Reply
      • lopata
        Posted on October 7, 2015 at 19:14 Permalink

        I added the property and now it’s functionning perfectly!

        Thanks!

        I wish I could donate you but I don’t have Paypal no more:(

        Reply
        • malihu
          Posted on October 7, 2015 at 19:31 Permalink

          Great 🙂

          autoExpandHorizontalScroll expands the horizontal area (which is usually needed for dynamic content) and depending on your markup you can set it differently. Basically, if your inner elements are floated you can set it to 2 and if your elements are inline/inline-block you can set it to 3. Setting it to true or 1 will automatically select the one or the other.

          You don’t need a paypal account to donate (just a credit/debit card) but if you cannot donate, no problem at all!
          Glad I helped 🙂

          Reply
  9. kishore kota
    Posted on October 6, 2015 at 04:46 Permalink

    having trouble with initializing the scroll bar with Angular JS Directives. I have a custom directive having a div with scrollable content…works fine outside the Angular JS…but when trying to use with Angular JS…scroll bar displays but does not move…I will try to provide more details…in the meantime anyone had similar issues or any suggestions..

    Reply
    • Kishore Kota
      Posted on October 6, 2015 at 07:27 Permalink

      app.controller('serviceInfoController', ['$scope','$timeout', function ($scope,$timeout) { $scope.config = { autoHideScrollbar: false, theme: 'DARK', axis: "x", live: "on", advanced:{ updateOnContentResize: true, autoExpandHorizontalScroll: true }, //setHeight: 100, scrollInertia: 0 } angular.element("#info-source-1").mCustomScrollbar($scope.config); }]);

      This is what I am trying to do…

      Reply
      • Kishore Kota
        Posted on October 7, 2015 at 07:09 Permalink

        Malihu, Can you help me on my issue ? I am using AngularJS + Bootstrap ..when I use the plug-in. It displays the scroll but freezes..do not move until I resize the window to a particular positions…otherwise it is not active at all.

        Reply
  10. Tristan Smith
    Posted on October 6, 2015 at 00:40 Permalink

    Is there any mechanism to update properties after the table has been initalized? For instance if I want to change the scroll theme later on without destroying the table and recreating?

    Reply
    • Tristan Smith
      Posted on October 6, 2015 at 01:08 Permalink

      Also I would like to change the auto hide scrollbar feature after the scroll panel is created, but I dont want to have to destroy.

      Reply
  11. lopata
    Posted on October 5, 2015 at 15:01 Permalink

    Hi! I contacted you before because the elements of my div were auto-scrolling sometimes when we put the cursor above or under the div.

    I found when does this happen:

    If you select some text of the div and if you drag it (with the mouse) somewhere. Then you place your cursor above or under the div: it auto-scrolls it.

    Is this a glitch or is there a way to avoid this?

    best regards and thanks for this script

    Reply
    • malihu
      Posted on October 5, 2015 at 16:33 Permalink

      Just tested this and you’re right, it does happen. I’ll push a fix for this on the next version (3.1.0) which I’ll publish in a couple of days (probably tomorrow).
      Thanks for the feedback 🙂

      Reply
      • lopata
        Posted on October 5, 2015 at 18:05 Permalink

        Thank you very much! 🙂

        Reply
      • lopata
        Posted on October 5, 2015 at 18:25 Permalink

        also you should consider making
        updateOnContentResize: false,
        updateOnImageLoad: false

        by default,

        because I think the timeOuts calls were making a memory leak on my page

        Reply
        • malihu
          Posted on October 5, 2015 at 18:44 Permalink

          This is also addressed in the upcoming version (3.1.0). I optimized the auto-update function and memory leak should be gone.

          Reply
  12. Nikolay
    Posted on October 4, 2015 at 23:53 Permalink

    Malihu, I am trying to add a callback function to the scrollbar after I have created it. The reason I don’t add the callback function earlier is because the content inside the div is dynamic and changes. So at one point I need the callback and another I don’t.

    My question is – Right now I use .mCustomScrollbar('destroy') to destroy the scrollbar and then I create it all over again to add the callback inside it. Is there a different way to add/remove content to the scrollbar method without destroying it?

    Reply
    • malihu
      Posted on October 5, 2015 at 00:14 Permalink

      Assume this code:

      $("#elem").mCustomScrollbar();

      At any point, you can do:

      $("#elem .mCSB_container").html("new content");
      or
      $("#elem .mCSB_container").append("new content");
      etc.

      The thing is that you need to add the new content inside the .mCSB_container element and not directly in the element with the scrollbar.

      I don’t know exactly what you want to do but you can use some variable inside the callback(s) in order to run them whenever you like. For example:

      var doaction; $("#elem").mCustomScrollbar({ callbacks:{ onScroll:function(){ if(doaction){ //do something after new content is appended... //if you want to run it only once after each time new content is appended //you can do: doaction=0; } } } }); //at some point in your script(s) $("#elem .mCSB_container").append("new content"); doaction=1;

      Hope this helps

      Reply
  13. shabby
    Posted on October 4, 2015 at 22:20 Permalink

    I noticed the plugin uses mousewheel.js(https://github.com/jquery/jquery-mousewheel). Is this a modified version? because I want to use the plugin to detect scrolling info when hovering over an element.

    $(‘#element).on(‘mousewheel’, function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
    });

    The problem is that returns undefined. Can’t that plugin be used along with mcustomscrollbar?

    Reply
    • malihu
      Posted on October 4, 2015 at 23:22 Permalink

      The plugin uses the standard version (currently 3.1.12), which is included in jquery.mCustomScrollbar.concat.min.js and as standalone in “js” directory in the archive. You can use any jquery-mousewheel plugin version you like.

      Your code doesn’t work (when the mousewheel event binded directly on the element with the custom scrollbar) because the plugin prevents the event propagation in order to prevent page scrolling when the actual overflowed content is being scrolled (hope this makes sense!).

      You’ll need to bind the mousewheel event on the scrollbar wrapper element instead. Also, your code has an error: a missing ' after '#element which is probably the reason for the undefined value.

      Assuming #element is the element with the custom scrollbar, change your code to:

      $('#element .mCustomScrollBox').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); });

      If #element is just another element not related to the custom scrollbar, just do:

      $('#element').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); });

      Reply
  14. Andhi Irawan
    Posted on October 2, 2015 at 10:56 Permalink

    Thank you Malihu. Great works. It more simple and easy to use than others.
    Here sample I implement in Magento and tested on Firefox, Opera, Chrome and Safari : sample use in Magento

    Reply
  15. rodica
    Posted on October 2, 2015 at 08:55 Permalink

    Hi MALIHU!!!!

    I have something like this:

    var cur_li = document.getElementById(elemID);
    var res = $(cur_li).is(“.mcsInView”); //problem is: this is always false!!!

    if (!res)
    $(‘content-1’).mCustomScrollbar(‘scrollTo’, cur_li);

    I Only want to scrollTo if the li element is not visible. But .is(“.mcsInView”) does not seem to work.
    I would also like to scroll the object ONLY vertically. Is it possible?

    thanks so much in advance! I love the way these sliders look and everything else works nicely for me!

    Reply
    • malihu
      Posted on October 2, 2015 at 22:45 Permalink

      Hello,

      The condition is .is(":mcsInView") (change the dot to colon).

      The method will automatically scroll to where the element is. You can define the vertical and horizontal scrolling in the method using an array, e.g.:
      $(selector).mCustomScrollbar("scrollTo",[y,x]);
      See position parameter and examples in scrollTo method

      Reply
      • rodica
        Posted on October 3, 2015 at 02:11 Permalink

        Thank you. I actually did have .is(“:mcsInView”) in the code and it is the same, does not seem to take effect.

        Re. the [y,x] I see I have to figure the pos. of the element in the list to use this method.

        thanks,
        Rodica

        Reply
        • Nikolay
          Posted on October 3, 2015 at 09:22 Permalink

          I am experiencing the same issue:

          alert($('.testh4').is(":mcsInView"));

          always returns false regardless of the h4 is in the viewport or not. It’s always “false”. Any ideas?

          Reply
          • Nikolay
            Posted on October 3, 2015 at 09:32 Permalink

            Okay I figured it out. I thought that .is(":mcsInView") is false once the whole element is out of the viewport. It goes to false once part of the element is out of the viewport. In my case the h4 was the first element so any bit of scrolling was triggering false.

            Malihu is there a method here that tells me if an element is completely out of the viewport or not?

          • Nikolay
            Posted on October 3, 2015 at 09:52 Permalink

            In regards to my last question. Malihu, I made a simple answer, don’t want to waste your time.

            function outOfViewport (element) { if (-element.mcs.top > lengthChange) { alert('out of viewport'); } } $('.div').mCustomScrollbar({ callbacks:{ whileScrolling:function() { outOfViewport(this); } }

        • malihu
          Posted on October 3, 2015 at 12:47 Permalink

          Where do you run the code? In some event or?

          Reply
  16. Andreas Pitsch
    Posted on September 30, 2015 at 19:17 Permalink

    I use this awesome plugin on a web app. I disabled scrolling on the page with touch (because it’s responsive design) using:
    $(document).on('touchmove', function(e) { e.preventDefault(); });

    I included a mCustomScrollbar for scrolling on the X axis.
    It works fine but it enables page scrolling on this area again.
    This is really annoying. I like, that you can add the “preventDefault” statement to the mouseWheel. Is this possible for touch as well?

    I really hate the Apple bounce effect -_-

    Thanks a lot,
    Andi

    Reply
    • malihu
      Posted on October 5, 2015 at 11:57 Permalink

      You can do this with CSS by setting touch-action: none and overwrite plugin’s style with !important. For example:

      .content{ -ms-touch-action: none !important; touch-action: none !important; }

      .content being the element with the scrollbar.

      Reply
      • Andreas Pitsch
        Posted on October 6, 2015 at 18:11 Permalink

        Thanks for your answer.

        The touch-action attribute doesn’t work on iPhone. the bounce is still there.
        The only way to stop that is AFAIK by using event.preventDefault(); in the touchmove event.

        Any thoughts on that?

        Reply
        • malihu
          Posted on October 7, 2015 at 02:28 Permalink

          I’ve pushed a new version on the 3.x branch which has a new option to completely disable document touch events on the element with the scrollbar.

          Get it here (update plugin .js and .css files):
          https://github.com/malihu/malihu-custom-scrollbar-plugin/tree/3.x

          The option parameter is documentTouchScroll which defaults to true, so to disable document scrolling, you can do:

          $(selector).mCustomScrollbar({ documentTouchScroll:false });

          You can use the above along with your document touchmove function etc.

          Reply
          • Andreas Pitsch
            Posted on October 12, 2015 at 15:05 Permalink

            Hey malihu,

            thanks for the quick replay and fixed!!!
            It works like a charm and I am very happy.

            Sorry for my late reply.
            Couldn’t test it before today.

            Greetings and THANKS!
            Andi

  17. OnengLar
    Posted on September 30, 2015 at 00:59 Permalink

    in horizontal mode, after focusing in input text or else – jumping to start position page =(

    how to fix it?

    Reply
    • malihu
      Posted on September 30, 2015 at 01:54 Permalink

      Either set the CSS position property on the input element (or its parent) or change which elements use the auto-scroll on focus functionality (see option and default value).
      For example, you can remove the input element:

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

      Reply
      • OnengLar
        Posted on September 30, 2015 at 10:37 Permalink

        Thanks! works!)

        not works only with textarea in comment service hypercomments, but it’s bugs from hypercomments i think…

        Anyway, Awesome plugin!

        Reply
      • OnengLar
        Posted on October 5, 2015 at 22:20 Permalink

        Ok, it’s work only for jquery 1.4

        Reply
  18. Saurabh Sharma
    Posted on September 29, 2015 at 13:11 Permalink

    I want to disable mouse wheel scroll and only want to allow scroll with scroll bar,

    i tried everything , but it is not working,

    i am using the following code,

    please help

    jQuery(".dcwss-content").mCustomScrollbar({ autoHideScrollbar: false, mouseWheel: false });

    Reply
  19. Xczer
    Posted on September 27, 2015 at 19:08 Permalink

    I have tried various methods to do this but it doesn’t work for me!
    I have to make my whole webpage scrollable!
    Just send me the fiddle on jsfiddle!

    Reply
  20. Loup
    Posted on September 25, 2015 at 17:52 Permalink

    Hello Malihu.

    I have use jquery for scrolltop but the slow don’t work:

    $('#mydiv').hover( function() { $('html, body').mCustomScrollbar({ scrollTop: 0 }, 'slow'); });

    And I want with jquery to disable the scroll but i don’t know the code.
    $('#mydiv').hover( function() { $('html, body').mCustomScrollbar({ DISABLE SCROLL });

    Can you help me please ?

    Reply
    • malihu
      Posted on September 25, 2015 at 20:21 Permalink

      Hello,

      scrollTop() works only with browser’s native scrollbar. The plugin offers the scrollTo method which provides a similar functionality. For example, to scroll to the top, you can do:

      $(selector).mCustomScrollbar("scrollTo","top",{ scrollInertia:500 });

      scrollInertia determines the animation duration (similar to “slow”).

      To disable the scrollbar, use the disable method, e.g.:

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

      Reply
  21. terma
    Posted on September 24, 2015 at 03:29 Permalink

    How to put div with width: 100% inside scroll? Browse scroll (overflow: auto) works fine and show expand empty div to all free space or show scroll. However custom scroll resize my empty div to 10px size

    Thx

    Reply
  22. Thomas
    Posted on September 22, 2015 at 21:45 Permalink

    How can i make this plug-in work on a unordered-list that is not scrollable but once i dynamically add list-items the unordered-list is scrollable?

    Reply
    • Thomas
      Posted on September 22, 2015 at 22:12 Permalink

      I fixed my own problem through window.setTimeout after loading my list-items. Awesome plugin btw!

      Reply
  23. oshratdo
    Posted on September 18, 2015 at 09:54 Permalink

    Hi,
    For some reason I cannot get the up/down arrows to appear. What am I doing wrong? My script looks like this:
    <script> (function($){ $(window).load(function(){ $("#pricelist").mCustomScrollbar({ theme:"dark-thick", scrollButtons:{ enable: true }, mouseWheel:{ enable: true }, keyboard:{ enable: true } }); }); })(jQuery); </script>

    Thanks,
    oshratdo

    Reply
    • oshratdo
      Posted on September 18, 2015 at 11:09 Permalink

      I fixed it. The problem was that I initialized both via js and html.

      Reply
  24. Didier
    Posted on September 17, 2015 at 19:33 Permalink

    Hi and thanks for this very good scroll.

    I have an issue with iframe and mcustomscrollbar (last version). On init scrollbar the content of the iframe is deleted.

    I’ve tried your iframe_example.html and i have the same issue.

    Could you help us to fix this…

    Thanks
    Didier

    Reply
    • malihu
      Posted on September 17, 2015 at 20:00 Permalink

      Hi,

      Does it happen for you in the demo?
      http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/iframe_example.html

      Does it happen on specific browser/OS?

      Reply
      • Didier
        Posted on September 18, 2015 at 15:37 Permalink

        Thanks for your fast response.

        All browser (chrome, safari, firefox, ie), windows 7.

        I’ve tried your example without your generic style.css… When i add it, it’s work. It would be a CSS issue.

        But in my project even adding your stylesheet, the content of the iframe is always deleted on init…

        I’m working on it starting of your example. I will keep you notified.

        Thanks again.

        Reply
  25. Alex
    Posted on September 17, 2015 at 18:50 Permalink

    Does the this.mcs.top callback option not work anymore? I literally copy-pasted your example and ended up with “undefined”.

    Reply
    • malihu
      Posted on September 17, 2015 at 19:55 Permalink

      Yes it does work (note that the object is available inside the callback functions). If you send me your code or a link I’ll gladly help.

      Reply
  26. bo
    Posted on September 17, 2015 at 18:41 Permalink

    Hi, I’m using your nice scroll-bar together with a collapse/expand function on the same field and I have a problem accessing the css properties of the field when the scroll-bar is attached. For example, I cannot change the background.

    Is there an option or method to do that or even to remove the scroll-bar if the content is collapsed, so I can change the css?

    Thanks for the great scroll-bar

    Reply
    • bo
      Posted on September 17, 2015 at 18:53 Permalink

      sorry, my mistake, did not notice that the scroll-bar adds a new container, that’s why my css do not work. Everything is fine, thanks for the nice scroll-bar, you can delete my comments.

      Reply
  27. Mohanmalhi
    Posted on September 17, 2015 at 18:37 Permalink

    Hi,
    I need to add horizontal scroll top & bottom on my site,
    Is this possible?
    Waiting for your response.

    Thanks,
    Mohanmalhi

    Reply
    • malihu
      Posted on September 17, 2015 at 19:58 Permalink

      You cannot have 2 horizontal scrollbars on the same element (same as browser’s native scrollbar).

      Reply
  28. marino
    Posted on September 17, 2015 at 03:12 Permalink

    Hey,
    Standalone use of the advanced option updateOnContentResize as true reset the content scroll position on hide/show.
    Is there a way to auto reset and keep the last scroll position (whitout set updateOnContentResize as false and call reset method with parameter false)?
    Thanks!

    Reply
    • malihu
      Posted on September 17, 2015 at 19:27 Permalink

      When the element is hidden and its dimensions become zero, the scrolling position will reset. The only way to do what you describe, is to use the scrollTo method to scroll to the previous position (before the element was hidden) after the element gets visible.

      For example: To get the last scrolling position right before the element is hidden and scroll to it right after, you can do:

      var scrollPos; //variable to store the scrolling position $(".content").mCustomScrollbar({ callbacks:{ whileScrolling:function(){ //store last scrolling position when element is visible (or default to zero) scrollPos=$(this).is(":visible") ? this.mcs.top : 0; }, onOverflowY:function(){ //scroll to the last stored scrolling position when element is visible if($(this).is(":visible")){ $(this).mCustomScrollbar("scrollTo",scrollPos,{scrollInertia:0}); } } } });

      The above should work for all ways of toggling visibility (jquery, CSS transitions etc.).

      Reply
  29. Andreu
    Posted on September 16, 2015 at 21:32 Permalink

    Hi Malihu,

    Is it possible to update the scrollbar in a concrete position? When I use the update method the scrollbar go to top automatically. If I try to move the scrollbar with scrollTo just after the update method, nothing happen. I simply need to load the scrollbar in a concrete position.

    Thank you for this amazing plugin, I’ll do a donation if I can make it work for our purpose 🙂

    Reply
    • malihu
      Posted on September 17, 2015 at 00:42 Permalink

      I think you need to use the timeout option of the scrollTo method (see “Method options” section in scrollTo method).

      For example after your update, use the scrollTo method with a specific timeout (default is 60ms), like:
      $(selector).mCustomScrollbar("scrollTo","top",{ timeout: 200 });

      The above will trigger the scroll-to event after 200 milliseconds.

      Reply
  30. vedha
    Posted on September 16, 2015 at 09:31 Permalink

    In IE9 its taking the auto height and scroll bar is appearing and we can able to see some extra space in the bottom of the page. If any one faced similar issue please let me know.

    Reply

Comments pages: 1 67 68 69 70 71 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>

css.php