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 66 67 68 69 70 84

  1. Nick Greiner
    Posted on September 16, 2015 at 02:35 Permalink

    Hello! I am having a hard time setting this up. I downloaded everything and it is running in my code, but wont show up when I test.

    Reply
    • malihu
      Posted on September 16, 2015 at 15:12 Permalink

      Hi, I need more info or a link to be able to help.

      Reply
    • Nick Greiner
      Posted on September 17, 2015 at 01:25 Permalink

      Right, yes. Here is how I set my one page site up. All my code, then this
      <link rel="stylesheet" href="assets/js/jquery.mCustomScrollbar.css" /> <script type="text/javascript" src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script> <script> $(".content").mCustomScrollbar({ theme:"minimal-dark" }) </script>
      I have tried different things in the tag like
      (function($){ $(window).load(function(){ $(".content").mCustomScrollbar(); }); })(jQuery);
      but nothing works. I am using windows 10, edge browser now but a version of chrome to test.

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

        Does your .content element have a CSS height set? Do you get any console error(s)?

        Reply
    • Nick Greiner
      Posted on September 17, 2015 at 23:04 Permalink

      CSS height is set to 100% (default) and there are no console errors related to jquery or the scrollbar.

      Reply
      • malihu
        Posted on September 18, 2015 at 01:28 Permalink

        Does the parent element have a height set? Does it work with browser’s default scrollbar?

        Reply
  2. Ahsan
    Posted on September 16, 2015 at 00:05 Permalink

    I can’t add mCSB_buttonUp and .mCSB_scrollTools .mCSB_buttonDown. Will you please help me about it ? I used this code:-

    (function($){
    $(window).load(function(){
    $(“.eat-in”).mCustomScrollbar({
    theme:”rounded”
    });
    });
    })(jQuery);

    Reply
  3. Jelly
    Posted on September 15, 2015 at 04:28 Permalink

    Hi there, i got a question about the autoexpand option.
    When no use this option, the Horizontal scroll is disappear.If enable this option, the Horizontal scroll is shown, but the content become no wrap,i need the word wrap with parent width and Horizontal scroll is enable.

    Reply
    • Jelly
      Posted on September 15, 2015 at 04:30 Permalink

      The text is fine, just the image is not full size.

      Reply
      • malihu
        Posted on September 15, 2015 at 16:52 Permalink

        If your main element has a fixed width (e.g. 500px), maybe you can give your text wrapper element the same max-width value (e.g. max-width: 500px;)

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

      Can you post your HTML/CSS or send me a link?

      Reply
  4. Sriharsha
    Posted on September 14, 2015 at 15:11 Permalink

    Hi,
    Thanks for the plugin.

    I have a small doubt…

    How can i scroll to top automatically, when user no longer keep his cursor inside the div (mCustomScrollbar).

    Thanks…

    Reply
    • malihu
      Posted on September 14, 2015 at 20:34 Permalink

      Hi,

      You can use the scrollTo method in your own script(s).
      For example, to scroll to top:
      $(selector).mCustomScrollbar("scrollTo","top");
      See “Plugin methods” section for more info and examples.

      Reply
  5. Tixel
    Posted on September 14, 2015 at 00:36 Permalink

    hello there,

    thank you for your wonderful plugin, I used it and it works superfine but lately i tried to add a horizontal scrollbar with your script on an adapted wpshower Portra theme.http://portra.wpshower.com

    It won´t work. Vertical it does fine, when I fiddled around with overflowing content.

    But with the horizontal scrollbar I always get a wrong @element-style width, which hands over the wrong width to the body or main content.

    Does it have anything to do with the infinite scroll?
    Is there a possibility to solve this?

    thank you!
    Tixel

    Reply
    • Tixel
      Posted on September 14, 2015 at 01:12 Permalink

      I solved it :)…. it was the auto expand option of course! Because the theme uses floats

      Reply
  6. lopata
    Posted on September 13, 2015 at 13:46 Permalink

    Hi again, Thanks for your reply it worked,
    But now I am facing a new problem: I am trying to optimize my website, and when I look at the timeline, there are many “Timer fired” coming from the custom scroll bar script:
    you can see screenshot here:
    https://gyazo.com/e7b433805ab5e30d177065bf9b3bc363

    Is there any way to optimize this ? As the only thing I want to use the custom scrollbar is for its design and not for the rest

    best regards

    Reply
    • lopata
      Posted on September 13, 2015 at 13:48 Permalink

      And this is the codes I am using:

      $("#chat").mCustomScrollbar({ theme:"dark", scrollInertia:10, mouseWheel:{ scrollAmount: 50 }, advanced:{ autoScrollOnFocus: "" }, callbacks:{ whileScrolling:function(){ myCustomFn(this); } } }); var scrollPct =0; function myCustomFn(el){ scrollPct = el.mcs.topPct; } $("#skintable").mCustomScrollbar({ axis:"x" , theme:"dark" }); $("#depositskins").mCustomScrollbar({ axis:"x" , theme:"dark" });

      Reply
    • malihu
      Posted on September 13, 2015 at 21:29 Permalink

      You can disable the auto-update timers (updateOnContentResize and updateOnImageLoad) if you want, like this:

      advanced:{ updateOnContentResize: false, updateOnImageLoad: false }

      but you’ll then have to use the update method manually if/when needed.

      Reply
      • lopata
        Posted on September 14, 2015 at 01:20 Permalink

        Thank you 🙂 I will donate to you

        Reply
  7. lopata
    Posted on September 11, 2015 at 09:08 Permalink

    Hi, I am using your scrollbar on my site for a chatbox, but sometimes after a while on the site it auto-scrolls up and down whether we put the cursor above or under the box.

    I don’t want this, I just want it to scroll with middle mouse button.

    Is there any way to remove this behavior?

    my site is csg0.com (with a zero)

    Thank you and regards

    Reply
    • malihu
      Posted on September 11, 2015 at 14:02 Permalink

      Hi,

      I can’t really reproduce the issue but try using the autoScrollOnFocus option parameter like this:

      advanced:{ autoScrollOnFocus: "" }

      Reply
      • lopata
        Posted on September 11, 2015 at 23:01 Permalink

        I did so, let’s try! Thank very much and very nice script it helped me a lot to have nice webiste scroll bars 🙂

        Reply
  8. Cobarzan Vlad
    Posted on September 10, 2015 at 18:50 Permalink

    Hey there. I am using your plugin on a site that also uses a full page scroll plugin to pass to different sections. To make them work together on mobile i am trying to trigger a “next page” event on the callbacks of your plugin, but i noticed that they only start when the user has scrolled, and there is no callback for when a user who has reached either end of the scroll tries to scroll in that direction again (for example, if i reached the bottom of the scrollable element, if i try to scroll down again, it would trigger function X).

    Is there any workaround, or could you point me to the place in the code where i could add my own code to make it work? Thanks.

    Reply
    • malihu
      Posted on September 10, 2015 at 20:44 Permalink

      I think it could be done (even by using the whileScrolling callback and mcs.topPct object to detect scrolling position) but I’d have to see your page and code to provide an exact solution. Can you send me a link or a test page?

      Reply
      • Cobarzan Vlad
        Posted on September 11, 2015 at 09:34 Permalink

        I don’t think the last comment went through, so i’m posting again.

        Thanks for replying. The site is at http://i2-4c.eu/beta

        I arrived to the same solution, of checking for the dragger position at the start and end of scrolling, and triggering the transition if they are the same (or really close to eachother) when the scrolling ends, but the callbacks don’t trigger. I tried using the whileScrolling, onScrollStart, onScroll. The problem is that the dragger has to move in order for them to trigger. If it’s already at either end of the dragger container and the user tries to scroll in the same direction again, the dragger doesn’t move, and they don’t trigger.

        I’m also pasting my code here so it’s easier to find.
        (function($){ var $restUp = 0; var $restDown = 0; var $ds = 0; $(window).load(function(){ $(".scrollable").mCustomScrollbar({ axis:"y", theme:"rounded-dots", fitToSection: true, callbacks:{ onScrollStart:function(){ $restUp=$( this ).find( '.mCSB_dragger' ).css('top'); }, onScroll:function(){ $restDown=$( this ).find( '.mCSB_dragger' ).css('top'); if((parseInt($restDown)-parseInt($restUp)<6) && (parseInt($restDown)-parseInt($restUp)>-6) && $restDown>'5px'){ $(this).focus(); var e = jQuery.Event("keydown"); e.which = 38; // # Some key code value $(this).val(String.fromCharCode(e.which)); $(this).trigger(e); alert('up'); $restDown=0; } if($restDown-$restUp<6 && parseInt($restDown)-parseInt($restUp)>-6 && $restDown>'5px'){ $(this).focus(); var e = jQuery.Event("keydown"); e.which = 40; // # Some key code value $(this).val(String.fromCharCode(e.which)); $(this).trigger(e); alert('down'); $restUp=0; } }, onTotalScrollOffset: 0, onTotalScrollBackOffset: 0, alwaysTriggerOffsets: true } }); }); })(jQuery);

        Reply
        • malihu
          Posted on September 11, 2015 at 15:05 Permalink

          I see. I think that you need to use an additional (global) variable and move the code which triggers the transition out of onScroll callback.

          I’m posting a (very) simple example of your bits of code to get an idea what I mean:

          //add an additional variable to check scrolling state var $restUp = 0; var $restDown = 0; var $ds = 0; var $scrollState = 0; //in plugin callbacks: onScrollStart:function(){ //set $restUp (as you currently do) along with $scrollState $restUp=$( this ).find( '.mCSB_dragger' ).css('top'); $scrollState=1; }, onScroll:function(){ //set $restDown (as you currently do) along with $scrollState $restDown=$( this ).find( '.mCSB_dragger' ).css('top'); $scrollState=0; }, //move your transition code/function/event out of the callback, //so it doesn't need to be triggered by the scrollbar script... e.g.: function foo(){ if(!$scrollState){ //if scrollbar is idle do your thing (check $restDown, $restUp etc.)... } }

          I can’t be sure if this will work for you, as it depends on your other scripts, but just to get the general idea.

          Reply
  9. Stefan
    Posted on September 9, 2015 at 12:06 Permalink

    Hi there,

    why isn’t the adress bar automatically hiding after scrolling on mobile devices (tested on chrome and safari) if I use mcustomscrollbar and how could I avoid this?

    Thanks.

    Reply
  10. Naveen
    Posted on September 7, 2015 at 14:34 Permalink

    Thanks for this amazing asset. I am trying to include this in my WordPress site and it works great.

    I just have one query. On a page with an ‘iframe’, just like the one you have included in the examples (iframe_example.html). If you open up that file in Chrome, the iframe scrolls when the mouse is over it. But when opening the same example in Firefox, the scrolling action stops as soon as the mouse comes over the iframe content. Can there be a fix to this? Looking forward to it.
    Thanks.

    Reply
    • malihu
      Posted on September 8, 2015 at 00:13 Permalink

      Hello,

      iframes are bit tricky to handle and I don’t think there’s a solution for the mouse-wheel to work when hovering over the iframe. What happens is Firefox prevents js events on cross-domain iframes. This is a javascript security feature and there’s not much you can do about it…

      Is the source of the iframe on a different domain than your WordPress site?

      Reply
      • Naveen
        Posted on September 8, 2015 at 05:46 Permalink

        Thanks for your replu.
        Yes the source of the iframe is on a different domain. its actually a jotform. Does that make it even more difficult to achieve the scrolling in Firefox?

        Reply
  11. loup
    Posted on September 6, 2015 at 17:14 Permalink

    Hello, thank you very much for your article but i have a problem.

    I want to add this (scrolltop):

    $(function() { $(".button").on("click", function( e ) { e.preventDefault(); $("body, html").animate({ scrollTop: $( $(this).attr('href') ).offset().top }, 600); }); });

    It does not work, but if I removed in body, html css Height = 100% it works but the scrollbar disappears…

    Can you help me please ? <3

    Reply
  12. Kabby
    Posted on September 4, 2015 at 18:24 Permalink

    When I enable the scroll buttons, both the top (up) and bottom (down) arrows cause the scroll to go down.

    Clicking and dragging the bar or using the mouse wheel allow me to go up, but clicking on the up arrow icon does not.

    (I am using 3.0.9)

    Thanks for any suggestions!

    Reply
    • malihu
      Posted on September 5, 2015 at 17:23 Permalink

      Can you send me a link and more details about browser, OS etc.?

      Reply
  13. Cyndi
    Posted on September 4, 2015 at 18:16 Permalink

    Can I change the theme in my CSS editor or does that have to be done in one of the php files? I am a designer, but have been doing well editing themes but this has me stumped and my theme creator has yet to clearly expalin what I need to do to use the “light” theme. The site is at http://www.freshmurals.com. I’d like all the backgrounds to be black, but first need to get the scrollbar to appear white. Thank you in advance!

    Reply
    • malihu
      Posted on September 5, 2015 at 17:39 Permalink

      I can’t answer about the php files (you’d have to ask the theme developer). Maybe there’s a setting in the theme to select a scrollbar theme(?)

      You can change the scrollbar theme in your wp theme CSS if you want (info) by copying the “light” theme and modifying its selector.

      I’d suggest though to ask the wp theme developer first, as there might be a setting to change/set the scrollbar theme easily via some setting/option.

      Reply
  14. dev cosmin
    Posted on September 4, 2015 at 09:42 Permalink

    Hello and thanks for this custom scrollbar !

    It works well until you have some Telerik Kendo UI controls inside the panel where you need the scroll.
    I have a Kendo UI multiselector that it is rendered as a selector plus a div with a list with all the items from the model.
    The problem is that when I clicked the control in order to select an item, the scroller scrolls automatically to up and the div with the list appears in a wrong position.
    If I switch to the default browser scrollbar, when I clicked to the control, the div appears in the place that should and the browser did not scrolls the content automatically to top as this control.
    Did someone found the issue ? Do you have a solution for this ?

    Reply
    • dev cosmin
      Posted on September 4, 2015 at 13:27 Permalink

      I was using an old version of jquery-custom-scroller. I just updated to the last release and it works great.

      Thanks

      Reply
  15. kelly
    Posted on September 1, 2015 at 18:05 Permalink

    Hi, love the script, but I have a small problem. While the script is loading the page displays the entire contents of the scroll area causing an awkward layout at the loading of the page. And it does this every time you go to the page, it doesn’t cache. Check out the page here: http://www.saintstephens.org/new/private-school-campus/florida-private-school-athletics/ (scroll is @ the top)

    Thanks for any and all suggestions

    Reply
    • Dejan Popovic
      Posted on September 2, 2015 at 18:14 Permalink

      This is basic code for setting expire dates for caching js files..
      Add the following code to your .htaccess file:

      ExpiresActive On ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/x-icon "access plus 1 year"

      I use it on my webpage: http://www.popwebdesign.net/seo-optimizacija.html

      Reply
    • malihu
      Posted on September 2, 2015 at 18:37 Permalink

      Hi,

      I get a 404 error on your link.

      I’m guessing the issue is in horizontal scrollbar(?) If yes, you should give your element a CSS height value and/or make it overflow: hidden;

      Reply
  16. Paulina
    Posted on August 31, 2015 at 21:39 Permalink

    Hi!
    Frist of all, I am not programist and I am a girl so we have 2 diesasters 😀

    I am creating website using Adobe Muse and little bit of Edge Animate. In this program I have ability to implement a html 5 code and js in head or body, but I dont have control where exactly this code will appear. And Muse itself generate quite shitty code.

    After big battle I managed to implement your js, but some troubles appeared.

    The most important thing is that paralax effent -which is very important to me- does not work.

    Besides that, scrollbar is covering behind objects. (Muse assign order by themselves)

    Here is example without your js:

    http://problem.bplaced.net/Piotrek/ScrollBar_malihu-custom-scrollbar-plugin_01_004%20-%20parallaxa%20test%20dzialania/bez_kodu/

    And here with it:

    http://problem.bplaced.net/Piotrek/ScrollBar_malihu-custom-scrollbar-plugin_01_004%20-%20parallaxa%20test%20dzialania/z_kodem/

    Here is code, that I’m adding to website:
    http://codepen.io/SoqllooS/pen/bVGgMM

    As a graphic designer, congratulation on nice minimalistic js. If you want to make a money from it, consider making a widget for Adobe Muse, because there are no good widgets for scrollbar and smoothscrolling 🙂

    Have a nice day!

    Reply
    • Balazs Olah
      Posted on September 2, 2015 at 09:56 Permalink

      Hi.

      You have
      $('#u195-4').registerPositionScrollEffect(...)
      stuffs in your code.
      $(‘#u195-4’) is an element identifier. It tells the browser when the page scrolls to that specific element some animation should happen. I believe the problem is that the scrollbar addon hides this. The content is inside a new box and the browser can’t detect the elements correct place? Isn’t there a parent element that you can assign for the registerPositionScrollEffect function to check against?

      Regards:
      Balazs Olah

      Reply
      • Paulina
        Posted on September 2, 2015 at 12:44 Permalink

        Hi!

        Thanks so much for your replay.
        Unfortunetly, I don’t quite understand. Would you be so kind and wrote me step by step what should I do?

        Thank you very much! 🙂

        Reply
    • malihu
      Posted on September 2, 2015 at 18:51 Permalink

      Hello,

      Don’t worry, no disaster 🙂

      1. The element’s “covering” scrollbar fix is easy. Just give the scrollbar a high z-index value in your CSS:

      body .mCSB_scrollTools{ z-index: 99; }

      2. Keeping the parallax effect is not really doable, as the parallax script in your page is made to work only with browser’s native (default) scrollbar (which is pretty standard for these scripts).

      There is a way to create parallax effect(s) with the custom scrollbar (using plugin’s callback functions) but it would require programming a more or less advanced script.

      Reply
  17. pmodern
    Posted on August 31, 2015 at 08:22 Permalink

    good.amazing!thanks .

    Reply
  18. Jack
    Posted on August 30, 2015 at 02:28 Permalink

    And you can’t even do simple things like
    elem.getCurrentTop() or elem.getCurrentLeft()

    all u can do is:
    elem.mCustomScrollbar(“scrollTo”,100);

    top or left? well , screw that! right?

    You make a lot of complicated stuff, but forget about the basic.

    Reply
    • malihu
      Posted on August 30, 2015 at 21:30 Permalink

      No, you can do much more.

      You can do anything you want with the scrollTo method. Please see scrollTo method section for info regarding the position parameter value.

      The value can be anything, from pixels to js/jquery object. It can also be a function so there’s no limit to the value(s) you get.

      If you tell me what you’re trying to do, I’ll gladly help.

      Reply
  19. Morgan Jeong
    Posted on August 25, 2015 at 12:59 Permalink

    hello.

    its a nice lib. thank you for sharing

    but, i have encountered a problem when i used it.

    i hided the scrolled box and then, i turned it back to be shown.

    at that time, the position of scrolling was initialized.

    even though i used ‘updateOnContentResize:false’ option and updated manually, it worked the same.

    Reply
  20. Fernando M
    Posted on August 25, 2015 at 00:48 Permalink

    Hi guys, have anyone tried this on wordpress

    I’m trying to custom the scrollbar in a custom content there, how should I proceed

    F

    Reply
  21. Nicolaas
    Posted on August 23, 2015 at 16:21 Permalink

    Hi,
    I’m having some trouble with using a custom scrollbar with XY axes in a flexbox.
    For some reason, adding a X-axis OR a Y-axis scrollbar to a flexbox is no problem. However, when adding both axes, the Y-axis shows, but all content of the flexbox is no longer visible (so I just get a blank flexbox with a Y-axis scrollbar).

    Here’s my javascript:
    (function($){ $(window).load(function(){ $("#pagecontent").mCustomScrollbar({ theme: "minimal-dark", scrollInertia: 300, axis: "yx", }); }); })(jQuery);

    Here’s the CSS for the “pagecontent” flexbox:
    #pagecontent { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; order 2; height: auto; overflow: auto; padding: 5px; }

    Anyone has an idea? Thanks!

    Reply
  22. jine
    Posted on August 20, 2015 at 09:20 Permalink

    hi
    i always get mCS_no_scrollbar class wat to do if i need scroll

    Reply
    • malihu
      Posted on August 20, 2015 at 21:52 Permalink

      mCS_no_scrollbar class means plugin script detects that no scrolling is needed. Either the content is not long enough (longer than its container element) or the element itself does not have a height set.

      Reply
  23. Bill Flanigan
    Posted on August 17, 2015 at 20:32 Permalink

    Hello Manos,

    I’ve been testing mCustomScrollbar since it can display a consistent look for a scrollbar on all the platforms. It seems to work well with touch too which is great but I can’t get it to work with Firefox on touch screens in the latest versions of Windows. Other browsers it’s working just fine with touch. Is it possible to configure for Firefox and touch?

    Reply
  24. Korey
    Posted on August 17, 2015 at 07:18 Permalink

    Trying to get this to work on a Theme…. using Monstra CMS

    However I cannot get it to show the bar, nor will it scroll. Any help?

    Reply
  25. Arun
    Posted on August 15, 2015 at 16:24 Permalink

    Im using it but the images are not visible.

    Reply
    • malihu
      Posted on August 20, 2015 at 21:49 Permalink

      Plugin archive contains many examples with images, maybe you can check on and see if it helps(?)
      It sounds more like a CSS issue but I can’t help unless I see your page/code.

      Reply
  26. martin
    Posted on August 13, 2015 at 23:28 Permalink

    Hello and thanks for your share. I wanna apply a costum scrollbar at the whole website not on a content, im trying to apply at the body, but that doesnt work. Is there anyway you can help me? thank you again.

    Reply
  27. Gothbag
    Posted on August 13, 2015 at 10:48 Permalink

    Greetings,
    First of all, thank you very much for all this. Unfortunately, I’m having a little issue I’d like to ask you about. I’m trying to use the dark-3 theme but for some reason the only “theme” that shows is one in which the scrollbar is white and the rest is black.

    This is my code. The divs that are supposed to use the scrollbar use the class “content”.
    $(window).load(function(){ $(".content").mCustomScrollbar({ theme:"dark-3", axis: "y" }); });

    Thank you very much!

    Reply
    • Manos
      Posted on August 13, 2015 at 11:43 Permalink

      Make sure you’re not initializing the default scrollbar via HTML. For example, you might have given the class name mCustomScrollbar to your element. In such case remove that class.

      Reply
  28. Stas
    Posted on August 13, 2015 at 10:46 Permalink

    Hi, is there way to detect scroll direction?

    Reply
    • Manos
      Posted on August 13, 2015 at 11:50 Permalink

      You can use this.mcs.direction object in your callback functions. It returns “y” or “x”.

      Reply
      • Stas
        Posted on August 13, 2015 at 18:38 Permalink

        Thanks for reply, I should’ve been more clear, I meant up or down direction by y axis

        Reply
        • malihu
          Posted on August 20, 2015 at 22:37 Permalink

          Not really, although you might be able to do it via callbacks. Depending on what you’re trying to do there might be other simpler solutions…

          Reply
  29. Amit Negi
    Posted on August 12, 2015 at 16:09 Permalink

    Hello Dear,

    I am facing issue in scrollTo property. Can you please verify that below snippet
    $(".k-grid-content").mCustomScrollbar("scrollTo", 'a[data-uid="234"]');

    but above code is not working. I want scroller to scroll till matched data attribute.

    Thanks

    Reply
    • malihu
      Posted on August 20, 2015 at 02:43 Permalink

      Yes, the code should work if there’s an element like:
      <a data-uid="234">...</a>
      in your content and you’ve initialized the scrollbar on .k-grid-content

      Reply
  30. Guillaume
    Posted on August 11, 2015 at 23:40 Permalink

    Hello and thanks for this widget !

    I have a question, how to add padding top and bottom on scrollbar ?

    Thanks.

    Reply

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