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 59 60 61 62 63 84

  1. shalini
    Posted on March 16, 2015 at 02:50 Permalink

    Hi Malihu,

    I’m using ur horizontal scroll. Currently when the dragger moves horizontally the image inside the container moves from left to right and vice versa. Is it possible to move just the dragger, not the image inside the container. When you drag the dragger from left to right a new image comes along with the dragger from left, this images is hidden on load and is visible when the dragger is moved to left and goes back to original position when the dragger reaches the left end. Any help would be appreciated.

    Thanks
    Shalini

    Reply
    • malihu
      Posted on March 16, 2015 at 07:55 Permalink

      I don’t know what exactly you’re trying to do, but you could give the image a CSS position:fixed and set its left property to where you want(?)

      Reply
  2. Alberto
    Posted on March 15, 2015 at 18:11 Permalink

    Dear Malihu,

    thank you for your plugin and for your support and kindness in helping all of us.

    I’m stuck as I can’t make the script customize my scrollbar, no matter what.

    You can find my work-in-progress here:

    http://diymgwip.esy.es/djselection.html

    The part I’m trying to customize has id=”djselearchivescr”, it’s the archive in the lower part of the page. Let me know if you can help me out, and if you prefer to check out the code in another way, such as GitHub.

    Thank you very much for your help… I’m going insane over this 🙂

    Best,
    Alberto

    Reply
    • Alberto
      Posted on March 15, 2015 at 18:12 Permalink

      Also – consider that this temporary hosting takes AGES to load. but id does eventually 🙂

      Reply
    • malihu
      Posted on March 16, 2015 at 07:51 Permalink

      Hello Alberto,

      You have plugin’s CSS inside noscript tag:
      <noscript> <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" /> </noscript>

      You need to place it outside of the tag (e.g. right before the closing head tag).

      Reply
      • Alberto
        Posted on March 16, 2015 at 23:52 Permalink

        thank you very much for your help, very appreciated.

        The scrollbar is now working and ready for customization!

        Thanks and best,
        Alberto

        Reply
  3. harida
    Posted on March 15, 2015 at 13:16 Permalink

    how to make nested scroollbar sir ?

    Reply
  4. Phillip Dews
    Posted on March 14, 2015 at 22:20 Permalink

    Hi Malihu,

    Great plugin dude. is it possible to use this on the scroll at all?

    Cheers
    – Phillip Dews

    Reply
    • malihu
      Posted on March 15, 2015 at 13:27 Permalink

      Hi Phillip,

      Can you elaborate more on what you want to do? What you mean “on the scroll”?

      Reply
  5. Dusan Ctvrtnicek
    Posted on March 14, 2015 at 20:17 Permalink

    Hello, thank you for great plugin,

    i have question about dynamic change content.

    i have HTML ul list, which i change dynamically with AJAX.

    <ul class="list-group inline-list"> ... </ul> $(".inline-list").mCustomScrollbar({ axis: "y", // horizontal scrollbar theme: "dark", advanced:{ updateOnContentResize: true } });

    but if i add some new content to my ul list, scrollbar doesnt react on changes.

    Reply
    • malihu
      Posted on March 15, 2015 at 13:25 Permalink

      Hello,

      You have to add new content in .mCSB_container as opposed to .inline-list directly. For example:
      $(".inline-list .mCSB_container").append("...");

      Reply
  6. Pablo
    Posted on March 14, 2015 at 12:29 Permalink

    Hey bud. Really thanks for the awesome plugin and your support.
    I ‘d like to ask something that i can’t fix so far.

    I am making a full height website and i am using the horizontal scroll for images.

    This website is responsive so the images have the style of height:100% and width:auto.

    The scrollbar doesn’t seem to update the 100% width of the images but taking the fixed width of them instead and hiding the rest images.

    Am i doing something wrong in my code? or should i change something in the script?

    Reply
    • malihu
      Posted on March 14, 2015 at 12:46 Permalink

      Hi,

      Maybe you need to use the autoExpandHorizontalScroll option parameter?
      advanced:{ autoExpandHorizontalScroll: true }

      Reply
      • Pablo
        Posted on March 14, 2015 at 13:10 Permalink

        I already used this parameter but it doesn’t seem to work.
        Maybe it’s something in the styles that affects the plugin’s code since you have this option enabled.

        I will try to see your example’s css and compare it with mine to see if it will work.

        Thanks for your quick reply.

        Reply
        • Pablo
          Posted on March 14, 2015 at 14:26 Permalink

          ** UPDATE **

          For those that need full height sliders, images etc, and for a reason they need to apply the height 100% of the elements inside the scrollbar.

          There’s a bug on the property height:100% that doesn’t count the change of the width of an element and it affects the scrollbar.

          I fixed it by using height:100vh instead.

          Reply
  7. James
    Posted on March 14, 2015 at 01:02 Permalink

    Thanks for all your help over the last couple of days.

    I hoped that disabling touch support would completely remove mCustomScrollbar for devices like the iPad, but it doesn’t – it only disables it.

    I would like to use native touch scrolling – is there a way to remove the plugin entirely? That is to say, not call the plugin at all for a touch screen device?

    Thanks

    Reply
    • malihu
      Posted on March 14, 2015 at 09:58 Permalink

      You could use a device detection like mobile-detect.js:
      <script src="http://cdnjs.cloudflare.com/ajax/libs/mobile-detect/0.4.3/mobile-detect.min.js"></script> <script> (function($){ var md=new MobileDetect(window.navigator.userAgent); $(window).load(function(){ if(!md.mobile()){ $(selector).mCustomScrollbar(); } }); })(jQuery); </script>

      Reply
  8. Multi Thinker
    Posted on March 13, 2015 at 09:17 Permalink

    Bro there is a problem in this plugin i have div like

    <code>
    <div class="history">
    </div>
    </code>
    

    this div is using overflow:auto;
    now with your plugin i make something like
    mCSB_container mCS_y_hidden mCS_no_scrollbar_y

    i can’t display block scrollbar it always become display:none; i even can’t set scrollbar on my div.

    something i can do to fix please let me know.

    Thank you.

    Reply
    • malihu
      Posted on March 13, 2015 at 10:05 Permalink

      Does .history element have a height set?

      Reply
  9. Multi Thinker
    Posted on March 13, 2015 at 09:15 Permalink

    Bro there is a problem in this plugin i have div like

    this div is using overflow:auto;
    now with your plugin i make something like

    (function($){
    $(window).load(function(){
    $(“.history”).mCustomScrollbar({
    exis:y,
    });
    });
    $(“.history:mcsOverflow”);
    })(jQuery);

    it always added a class with history class mCSB_container mCS_y_hidden mCS_no_scrollbar_y,

    i can’t display block scrollbar it always become display:none; i even can’t set scrollbar on my div.

    something i can do to fix please let me know.

    Thank you.

    Reply
  10. Harsh
    Posted on March 13, 2015 at 08:40 Permalink

    Hi malihu
    Your scrollbar is awesome,
    but when we are using in safari browser at windows plateform then mousewheel js not working properly, scrolling becoming very slow.

    please fix it.

    Thanks
    Harsh

    Reply
    • malihu
      Posted on March 13, 2015 at 10:13 Permalink

      Hello,

      The scrollbar is tested and works on Safari (versions 6, 7 etc.) on OSX.

      Safari (5.1.7) for Windows is no longer supported as it’s a deprecated/non-continued browser. You could use a previous version of jquery-mousewheel plugin (https://github.com/jquery/jquery-mousewheel/releases) that might work better with old Safari although I don’t know why you would want to do it.

      Reply
      • Harsh
        Posted on March 13, 2015 at 12:25 Permalink

        ok
        I have upgrade my safri.
        But i have found same problem on linux plateform only for chrome browser.

        reply me.

        Thanks
        Harsh

        Reply
        • malihu
          Posted on March 13, 2015 at 12:41 Permalink

          If you find that the mouse-wheel needs tweeking in some browser/OS combination you can use the mouseWheel option parameters. More specifically the deltaFactor and scrollAmount.

          Of course it would be best to alter the deltaFactor value in a condition that will check for the specific browser/OS, otherwise you might “fix” Chrome on Linux and “break” Chrome on Windows.

          You can also find more specific information about the mouse-wheel here:
          https://github.com/jquery/jquery-mousewheel

          Hope this helps

          Reply
          • Harsh
            Posted on March 14, 2015 at 14:10 Permalink

            Hello malihu

            I used deltafactor for fixing wheeling problem at linux plateform(chrome browser) , but the problem is still not fixed.

            Reply me.

            Thanks
            Harsh

  11. Seb
    Posted on March 12, 2015 at 13:12 Permalink

    Hi malihu,

    Thank you for your very nice scrollbar first.

    I have a question : when I activate mCustomScrollbar in my div #container, all images in this div (and div child) have a add class name ‘mcs_img_loaded’ ???

    And I don’t know why first and then how to disable it (I’m newbie in Jquery ^^)

    Thanks for your help

    Reply
    • malihu
      Posted on March 12, 2015 at 13:31 Permalink

      This is just a class added by the plugin to flag images that have loaded, so it can update the scrollbar automatically.

      It can be disabled by setting the updateOnImageLoad option parameter to false
      advanced:{ updateOnImageLoad: false }

      Reply
      • Seb
        Posted on March 12, 2015 at 15:19 Permalink

        Thank you for your answer but that change nothing…

        (function($){ $(window).load(function(){ $("#container").mCustomScrollbar({ theme:"light", advanced:{updateOnImageLoad:false}, scrollInertia:400, }); }); })(jQuery);

        and i don’t see error in my code. It is very simple

        Reply
        • malihu
          Posted on March 12, 2015 at 17:07 Permalink

          Ooops you’re right! I missed a condition in the script. I’ll fix this on the next update. In the meanwhile you can remove the class with simple jQuery on scrollbar initialization:
          $("img.mCS_img_loaded").removeClass("mCS_img_loaded");

          Reply
          • Seb
            Posted on March 12, 2015 at 20:03 Permalink

            Thanks 🙂 it’s ok now

          • Seb
            Posted on March 12, 2015 at 21:48 Permalink

            Hi again

            I have a last “problem”, perhaps a parameter in configuration but I don’t find it to solve it.

            For info, perhaps helpfull, the structure of my web site is :
            – header > fixed > width 100%
            – div content (with scroll) > width 1000 px, margin 0 auto
            – footer > fixed > width 100%

            So when I load a new page or click on submit button (so reload page in this case) I see this during less 1 seconde :
            1- my div content move to right – I see the default scroll
            2 – the custom scroll appears and my div content remove to left (to its original position without your script)

            Strange, a load problem ? I hope you understand what I say…
            Maybe I would be able to make screens but not sure

            Thanks

          • Seb
            Posted on March 12, 2015 at 22:02 Permalink

            I rectify after tests, so good position of the div is before the custom scroll appears

            I check the css of scrollbar…

        • malihu
          Posted on March 13, 2015 at 03:54 Permalink

          I can’t really say without seeing your page. Does the same happen with and without the custom scrollbar?

          Reply
  12. shalini
    Posted on March 12, 2015 at 02:38 Permalink

    Hi malihu,

    Loved the scrollbar, pardon me as I’m a jQuery newbie.

    Im using the horizontal bar, is it possible to replace an image for horizontal dragger.

    Reply
    • malihu
      Posted on March 12, 2015 at 08:33 Permalink

      Sure.

      Everything is done with CSS in jquery.mCustomScrollbar.css, so you don’t need jQuery at all.

      More specifically, in section “6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS” where you can edit the default (or any) theme, or make your own.

      The visual scollbar dragger element is the .mCSB_dragger_bar. You can edit line 357 (for default theme) and apply an image as its background, change/remove color etc. Each theme contains all scrollbar states (hover, active, dragging etc.).

      Most of the times, you’ll want a fixed-sized scrollbar when using image(s), so you’ll need to set autoDraggerLength option parameter to false and set the width of the horizontal scrollbar in the CCS in line 177.

      You could of course just overwrite the dragger styling in your own CSS file. For example you can simply do:
      #my-element-id .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 60px; } #my-element-id .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background: url(my-scrollbar.png) no-repeat center; }

      Reply
      • Shalini
        Posted on March 13, 2015 at 01:08 Permalink

        Thanks for the help Malihu

        Reply
  13. Mohsin Khan
    Posted on March 11, 2015 at 15:02 Permalink

    I am trying to use your plugin to put a scroll bar inside a textarea (I have downloaded your code for textarea) but it si not working correctly. I mean when I am trying to scroll using mouse scrollbar is not moving. Also, for the down arrow key as well the scroll bar is not moving. Try to run your textarea file to reproduce this issue.

    Reply
    • malihu
      Posted on March 11, 2015 at 20:55 Permalink

      Does it work when you open the textarea_example.html?
      If it does, maybe you missed essential code provided in the example(?)

      Reply
  14. Noah Shrader
    Posted on March 11, 2015 at 05:34 Permalink

    Hey, awesome plugin. Have used it for a number of things!

    Came across an instance where I wanted to be able to apply a class to an element when you’ve scrolled to a certain point from the top (like a scrollTop function). I’ve read through all your callbacks but you can only offset as you return to the start of scroll or when you near the end.

    Would there be a solution with your plugin where you could either state, “if you scroll past 100px, add class, else, remove class”?

    Any help would be much appreciated. Thanks so much!

    Reply
    • malihu
      Posted on March 11, 2015 at 21:05 Permalink

      Check User-defined callbacks section above.

      this.mcs.top object will return the top position of the content, so you can use it in your callback(s) to do things like:

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

      Reply
  15. J Yeong
    Posted on March 9, 2015 at 15:47 Permalink

    When I publish my web online, it shows extra scroll bar with Chrome.
    When It was offline which runs in local computer it doesn’t have the extra scroll bar.
    Mozilla and IE work well even it is online.

    Here is the screenshot of my webpage
    https://imageshack.com/i/f0DgEpBQj

    Reply
    • malihu
      Posted on March 10, 2015 at 01:47 Permalink

      This is a CSS issue. You probably need to add overflow:hidden; to the body.

      Reply
  16. piscu
    Posted on March 7, 2015 at 23:15 Permalink

    Hi, this not working. Can you help me please?

    mouseWheel: { disableOver: [“select”, “option”] }

    in this code

    $(‘#content .pbright’).css({ ‘max-height’: ($(window).height()) – 205 + ‘px’ }).mCustomScrollbar({
    theme: “dark-thick”,
    scrollInertia: 600,
    mouseWheel: { disableOver: [“select”, “option”] },
    advanced: {
    autoScrollOnFocus:false,
    updateOnContentResize: true,
    updateOnBrowserResize: true
    }
    });

    Reply
    • malihu
      Posted on March 8, 2015 at 23:08 Permalink

      Code seems correct. Does it work on some browser(s)? Can you send me a link to check for other issues?

      Reply
  17. Aaron
    Posted on March 7, 2015 at 19:19 Permalink

    This is some great work!

    I was curious if there is a way to set focus on an element automatically when the page loads to allow for keyboard scrolling without having to select it manually?

    Reply
    • malihu
      Posted on March 8, 2015 at 22:58 Permalink

      Sure. You can call jQuery focus() on content wrapper (.mCustomScrollBox) after plugin function call. For example:
      $(selector).mCustomScrollbar({ /* options */ }).children(".mCustomScrollBox").focus();

      Reply
  18. James
    Posted on March 6, 2015 at 13:12 Permalink

    I posted a comment yesterday. There’s a lot I like bout this plugin and I really want to use it, but I’m having a lot of trouble with it. Please can you help, otherwise I will have to return to my usual method. Thank you.

    Using web inspector I can see that the plugin is loading and interacting with the div I want to scroll but no scroll bar is showing. If I change my css from overflow: hidden to overflow: scroll, the usual browser scrollbar appears and functions.

    Also, there seems to be a conflict with the scrollbar css that causes the content within the scrolling div not to render. So this link to the site in progress doesn’t call the scrollbar css.

    http://scratchthesky.com/wip/kearsey

    Reply
    • malihu
      Posted on March 7, 2015 at 15:24 Permalink

      Hi,

      It seems that you haven’t included plugin’s CSS (jquery.mCustomScrollbar.css) in your page.

      Reply
      • James
        Posted on March 10, 2015 at 15:23 Permalink

        Since I sent the query, I modified the page.

        If I include the link to the plugin’s css it has the effect of causing the contents of div .inner to disappear. See:

        http://scratchthesky.com/wip/kearsey/index_mcustomscrollbar.html

        Reply
        • malihu
          Posted on March 10, 2015 at 19:18 Permalink

          Since your elements (.logo, .content_profile etc.) are absolutely positioned, you need to wrap them in a div with a fixed height (same height as .inner). For example:
          <div class="inner"> <div style="height: 205px;"> <div class="logo">...</div> <div id="no-template-pager">...</div> <div class="content_profile">...</div> <!-- etc. --> </div> </div>

          Reply
          • James
            Posted on March 11, 2015 at 14:53 Permalink

            Yes, I see.

            However, even with that additional div, the custom scrollbar does not show.

        • malihu
          Posted on March 11, 2015 at 20:58 Permalink

          You still need to include plugin CSS in your HTML.

          Reply
          • james
            Posted on March 12, 2015 at 13:43 Permalink

            My mistake – thank you – I have it working.

            Only problem now is that the new div has to be a fixed height (not a percentage) to work. Presumably if all the contents of div .inner were relatively positioned, the new div would not be necessary?

        • malihu
          Posted on March 12, 2015 at 14:08 Permalink

          Yes it would not be necessary. Try it and let me know.

          Reply
          • James
            Posted on March 12, 2015 at 19:43 Permalink

            Yes – I have that working locally thanks. Useful to know.

            Is it possible to offset the top of the scrollbar relative to the content? For example, could the top of the scrollbar start 100px lower than the top of the content?

        • malihu
          Posted on March 13, 2015 at 03:50 Permalink

          The scrollbar position is set on line 66 of jquery.mCustomScrollbar.css, so you can change its top position like:
          .mCSB_scrollTools{ top: 100px; }

          Reply
          • James
            Posted on March 13, 2015 at 16:23 Permalink

            That’s great – thanks.

            Are the scrollbar buttons visible by default? They don’t appear to be showing in my page – although the hotspots are functioning.

        • malihu
          Posted on March 13, 2015 at 19:47 Permalink

          No, you need to enable the scrolling buttons like this:
          scrollButtons:{ enable: true }

          and make sure your have mCSB_buttons.png file in plugin directory.

          Reply
  19. vania
    Posted on March 6, 2015 at 13:07 Permalink

    mCSB_container.bind(“touchstart.”+namespace+” pointerdown.”+namespace+” MSPointerDown.”+namespace,function(e){
    if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){touchable=0; return;}
    /* mio */ touchable=1; touchDrag=1; docDrag=0;

    and

    var offset=mCustomScrollBox.offset(),y=_coordinates(e)[0]-offset.top,x=_coordinates(e)[1]-offset.left;
    /* mio */ if((endTime-runningTime)>45){return;}
    /* mio */ speed=800/(endTime-startTime);
    var easing=”mcsEaseOut”,slow=speed<2.5,

    i've done these changes ("mio") to work with Windows 8.1 ie Explorer touch (surface pro 3) but the real problem with surface is that when i scroll with touch, and there is a link below, after scrolling it always open the link.
    it do yhis just in Explorer, chrome is ok.

    Reply
    • vania
      Posted on March 9, 2015 at 12:18 Permalink

      Do you have some solution for opening link after (or during) scroll on Explorer touch?

      Reply
  20. James
    Posted on March 5, 2015 at 12:28 Permalink

    Hi – this plugin looks great and is exactly what I need to use on a site I’m working on except I cannot get it to work. I suspect it may be due to the fact that the I’m calling the script on is initially hidden (display:none;) until made visible by JS.

    Additionally, the value of the height of the is specified as a % so as to be responsive (sometimes it will need to scroll sometimes it won’t).

    Please could you advise? The work in progress is at http://scratchthesky.com/wip/kearsey/

    Once the page fully loads, click on ‘Profile’

    The I want to scroll has the classname ‘.inner’

    Many thanks for your help with this – will be happy to make a donation for a solution! 🙂

    Reply
    • James
      Posted on March 5, 2015 at 12:32 Permalink

      Sorry – some missing words in that first post. SHould read as follows…

      Hi – this plugin looks great and is exactly what I need to use on a site I’m working on except I cannot get it to work. I suspect it may be due to the fact that the DIV I’m calling the script on is initially hidden (display:none;) until made visible by JS.

      Additionally, the value of the height of the DIV is specified as a % so as to be responsive (sometimes it will need to scroll sometimes it won’t).

      Please could you advise? The work in progress is at http://scratchthesky.com/wip/kearsey/

      Once the page fully loads, click on ‘Profile’

      The DIV I want to scroll has the classname ‘.inner’

      Many thanks for your help with this – I will be happy to make a donation for a solution!

      Reply
  21. Cesare de Villiers
    Posted on March 5, 2015 at 10:49 Permalink

    I can’t get the scrollbar appearance to change. I need help please. I read your tutorial and checked the example but nothing changes the appearance.

    Reply
  22. jinendra
    Posted on March 4, 2015 at 15:35 Permalink

    how to set scroll position dynamically without load scroll

    Reply
    • malihu
      Posted on March 7, 2015 at 15:27 Permalink

      You can use the setTop option parameter, e.g.:
      $(selector).mCustomScrollbar({ setTop: "-100px" });

      Reply
  23. deepa
    Posted on March 4, 2015 at 15:10 Permalink

    Hi,

    I used custom scrollbar in popup dialog box. In ipad and iphone devices, when scrolling the content, body content also scrolling. plz I need solution for this. When the scrolling the content, body content never scrolling.

    Reply
  24. Alex
    Posted on March 4, 2015 at 15:02 Permalink

    Hi, guys!
    I use mcustomscrollbar script on my website and it’s works fine.
    So a I have a widget that uses another mcustomscrollbar plugin on its own side too.
    This widget connect with my page by script tag (and it works with jquery noConflict method), not by iframe.

    So we have two codes of scrollbar plugin and my first plugin cant detect need of vertical scrollbar, its always have mCS_no_scrollbar class. Second plugin works correct with widget elements. It looks like two identical functions in conflict (but why if another uses a $.noConflict method). There is no conflict in CSS. How can I fix it, could you help?

    Reply
    • Alex
      Posted on March 4, 2015 at 16:22 Permalink

      Please, check it:
      https://jsfiddle.net/98epju1c/

      1. light select (select font box) – uses first plugin for scrollbar of select’s list;
      2. dark block – result of widget.js, this file contents jquery noConflict method and second scrollbar plugin.

      so, second plugin located inside noConflict… but there is a conflict. I see two scrollbars in dark block. I’ve tried to change plugin name to call it, but it didn’t help. Original site may have not a scrollbar plugin, that’s why I connect it inside.

      I don’t know what to do 🙁

      Reply
      • malihu
        Posted on March 7, 2015 at 15:41 Permalink

        The CSS rule:
        #widget div{ ... }
        should not be there.

        This rule alters all scrollbar markup as it applies to any div inside #widget.

        Reply
        • Alex
          Posted on March 17, 2015 at 15:05 Permalink

          Indeed. We can remove this rule… but it didn’t help for the drop-down list named “Select font” — its have more than 3 options for choose (still there is no scrollbar).
          I have removed incorrect css rule , then reset a fiddle. So, then I click on black block with text and it scrolls. But there is a second scrollbar there.
          Something wrong… 🙁
          it’s looks like there are two calls of mCustomScrollbar, but it can’t be because two idential plugins (and calls for this plugins) sets in two diffrent noConflict scripts.

          Reply
  25. jine
    Posted on March 4, 2015 at 14:46 Permalink

    hi
    how to set scroll possion dynamically with load

    Reply
  26. Ashish Agarwal
    Posted on March 3, 2015 at 14:03 Permalink

    On mobile, scrollbar is not smoothly working. Can you give good configutation for mobile according to you?

    Reply
    • malihu
      Posted on March 3, 2015 at 17:25 Permalink

      Try disabling updateOnImageLoad:
      advanced:{ updateOnImageLoad: false }

      Reply
      • Ashish Agarwal
        Posted on March 4, 2015 at 11:39 Permalink

        Thanks malihu for your support. It is working fine now.

        Reply
  27. piscu
    Posted on March 3, 2015 at 10:26 Permalink

    Hi, this not working. Can you help me please?

    mouseWheel: { disableOver: [“select”, “option”] },

    Reply
    • malihu
      Posted on March 3, 2015 at 17:30 Permalink

      It should normally work (I’ve tested it locally)… Can you send me your link or code?

      Reply
      • piscu
        Posted on March 3, 2015 at 18:11 Permalink

        $(‘#content .pbright’).css({ ‘max-height’: ($(window).height()) – 205 + ‘px’ }).mCustomScrollbar({
        theme: “dark-thick”,
        scrollInertia: 600,
        mouseWheel: { disableOver: [“select”, “option”] },
        advanced: {
        autoScrollOnFocus:false,
        updateOnContentResize: true,
        updateOnBrowserResize: true
        }
        });

        Reply
      • piscu
        Posted on March 3, 2015 at 19:40 Permalink

        $(‘#content .pbright’).css({ ‘max-height’: ($(window).height()) – 205 + ‘px’ }).mCustomScrollbar({
        theme: “dark-thick”,
        scrollInertia: 600,
        mouseWheel: { disableOver: [“select”, “option”] },
        advanced: {
        autoScrollOnFocus:false,
        updateOnContentResize: true,
        updateOnBrowserResize: true
        }
        });

        This code working on modal

        Reply
  28. Ashish Agarwal
    Posted on March 2, 2015 at 17:21 Permalink

    I want to integrate this plugin “jquery.mCustomScrollbar.concat.min.js” with other plugin “jquery.malihu.PageScroll2id.min.js” but i am not able to do it.
    Actually i make a table by div. I give unique id to every div row and show custom scrollbar. Now i want to scroll by id. I used like
    function handleClickAlpabetChar(character) {
    var code = character.charCodeAt(0);
    var idCode = document.getElementById(code);
    if (idCode){
    var top = idCode.offsetTop;

    $(“.mCustomScrollBox”).mCustomScrollbar({
    setTop: top+”px”,
    autoHideScrollbar:true,
    theme: “dark”
    });
    }

    }

    but after second click, it does not take top from zero.

    Reply
    • malihu
      Posted on March 2, 2015 at 17:36 Permalink

      Those 2 plugins are completely different as “Page scroll to id” works only with browser’s native (default) scrollbar.

      Custom scrollbar plugin provides the scrollTo method which you can use in your script(s) to scroll to any position within your content.

      Reply
      • Ashish Agarwal
        Posted on March 3, 2015 at 12:30 Permalink

        I tried
        $(“.mCustomScrollBox”).mCustomScrollbar(“scrollTo”,”#id”); and
        $(“.mCustomScrollBox”).mCustomScrollbar(“scrollTo”,”top”);
        But nothing is working. Can you please help

        Reply
        • Ashish Agarwal
          Posted on March 3, 2015 at 16:26 Permalink

          Thanks malihu for your support. It is working now. I was doing a mistake.

          Reply
  29. Martin Castillo
    Posted on February 28, 2015 at 14:24 Permalink

    Hi, it is me again.

    I have found the conflict. It was a CSS Tag “overlay” from another script.

    Anyway thanks and keep developing fanstastics plugins.

    Best regards Martín

    Reply
  30. Martin Castillo
    Posted on February 28, 2015 at 11:39 Permalink

    Hi, great plug in you have created!

    I am working in my new homepage and i integrated the plug in to the new page. It looks terrific but the links don’t work anymore, when i install the script “jquery.mCustomScrollbar.concat.min.js”
    I have tried many option without success.
    I would appreciate, if you can help me.
    You can see the project here:http://www.martin-castillo-photography.de/cuadro/index.html

    Best regards

    Martín

    Reply
    • malihu
      Posted on March 2, 2015 at 17:38 Permalink

      Hello,

      Which links don’t work? I checked your page but didn’t see any links…

      Reply

Comments pages: 1 59 60 61 62 63 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