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 54 55 56 57 58 84

  1. roabhi
    Posted on November 27, 2014 at 14:43 Permalink

    Hi there (again).

    Is it possible to set a fixed height for the horizontal scrollbar (rail & dragger)?. LetΒ΄s say 150px for both?

    IΒ΄ve been tweaking the values included in section 3 (HORIZONTAL SCROLLBAR x-axis) but it seems that those values are depending on some other values I cannot locate. IΒ΄m not using any theme so IΒ΄m asuming is the default (light) which (afaik) is not including any styling besides color overrides.

    Could you please me point at the right direction?.

    Thank you!

    Reply
    • malihu
      Posted on November 27, 2014 at 17:30 Permalink

      The first thing to do is set autoDraggerLength option parameter to false, e.g.:
      $(selector).mCustomScrollbar({ autoDraggerLength: false });

      and then change the CSS (line 170-180).

      Reply
  2. Gustavo
    Posted on November 27, 2014 at 06:13 Permalink

    Hi, Well it’s great this plugin, but i have a question, How I can use the ‘mct.top’, to put a different color to that percentage of what remains to be seen ?, thanks

    Reply
    • malihu
      Posted on November 28, 2014 at 18:15 Permalink

      I can’t really understand what you’re trying to do. Can you explain a bit more? The percentage of what?

      Reply
  3. Adi
    Posted on November 26, 2014 at 10:21 Permalink

    I’m struggling to understand the syntax for ‘live’ and ‘liveSelector’. I understand why they’re supposed to do, but I can’t figure out the exact syntax. Can you show an example? πŸ™‚

    Reply
    • malihu
      Posted on November 26, 2014 at 18:31 Permalink

      Sure.

      live is the basic option which sets live mode on/off. liveSelector is an extra option which can be used to specify a different selector than the one called on mCustomScrollbar function.

      Examples:

      1. Elements with class “myClass” will get custom scrollbar, now and in the future:
      $(".myClass").mCustomScrollbar({ live:"on" });

      Optionally, if/when live functionality is not needed anymore:
      $(".myClass").mCustomScrollbar({ live:"off" });

      2. Existing elements with class “myClass” and “myOtherClass” will get custom scrollbar. Elements with class “myOtherClass” will get custom scrollbar, now and in the future:
      $(".myClass, .myOtherClass").mCustomScrollbar({ live:"on", liveSelector:".myOtherClass" });

      Optionally, if/when live functionality is not needed anymore:
      $(".myOtherClass").mCustomScrollbar({ live:"off" });

      Reply
  4. sG
    Posted on November 24, 2014 at 13:03 Permalink

    Hi dear,

    Thank you for this plugin, it is very nice & cool but i have some problems to use it on safari. Mousewheel doesn’t works on Safari 5.1.7 for windows, i can only click on the arrow to scroll the content, you can see the problem with your demo’s page: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html

    I have an other problem on Safari 5.1.10 for Mac Os X – Mac Book PRO – Trackpad, the scrolling can get very jittery when i scroll down.

    Can you help me to fix it?

    Thank you in advance.

    Reply
    • sG
      Posted on November 24, 2014 at 13:13 Permalink

      Last information i miss it: i use the version 3.1.11 of the plugin

      Reply
    • sG
      Posted on November 27, 2014 at 11:17 Permalink

      I am worried about not seeing a response, the plugin does works on Safari?

      Reply
    • sG
      Posted on November 28, 2014 at 11:09 Permalink

      No answer, too bad, i change plugin!

      Reply
    • malihu
      Posted on November 28, 2014 at 19:39 Permalink

      Hello,

      The plugin works in Safari. Your issue about Safari version 5 has to do with the jquery mousewheel plugin.

      You can try changing mousewheel plugin version and/or changing the mousewheel options this plugin provides. Specifically: mouseWheel:{ scrollAmount }, mouseWheel:{ deltaFactor } and mouseWheel:{ normalizeDelta }.

      The above might also make trackpad scrolling on Safari 5.1.10 smoother.

      The following discussion on mousewheel plugin might also help:
      https://github.com/jquery/jquery-mousewheel/issues/90

      PS. I understand your frustration when dealing with an issue but please consider that the plugin is free and responding to comments takes time (and should not be taken for granted).

      Reply
  5. Eric
    Posted on November 23, 2014 at 21:36 Permalink

    Hello. I’m not good with English, and I use a translator. Thank you so much for the best plugin for scrolling sites. And not think of a better guess. I have a question for you. I can not understand how to use your scroll to the events in scripts. For example I want to when scrolling down the page 300pks, I get a fixed menu navigation. If I use the scroll by default, then everything works fine. But with your scrolls, nothing happens.

    What can be changed in the script? Here is an example script for the appearance of the menu:

    $(document).ready(function(){ var $menu = $("#menu"); $(window).scroll(function(){ if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){ $menu.fadeOut('fast',function(){ $(this).removeClass("default") .addClass("fixed transbg") .fadeIn('fast'); }); } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) { $menu.fadeOut('fast',function(){ $(this).removeClass("fixed transbg") .addClass("default") .fadeIn('fast'); }); } });//scroll $menu.hover( function(){ if( $(this).hasClass('fixed') ){ $(this).removeClass('transbg'); } }, function(){ if( $(this).hasClass('fixed') ){ $(this).addClass('transbg'); } });//hover });//jQuery

    Reply
    • malihu
      Posted on November 24, 2014 at 13:47 Permalink

      Hello,

      You’ll need to use your code inside plugin’s whileScrolling callback (instead of $(window).scroll(). For example:
      $(selector).mCustomScrollbar({ callbacks:{ whileScrolling:function(){ var pos=this.mcs.top,$menu=$("#menu"); if(pos<-300 && $menu.hasClass("default")){ /* show fixed menu code... */ }else{ if($menu.hasClass("fixed")){ /* hide fixed menu code... */ } } } } });

      Reply
      • Erik
        Posted on November 30, 2014 at 15:23 Permalink

        Did as you asked. Still does not work. Maybe error in the code?

        Here it is:

        $(document).ready(function(){ var $menu = $("#menu"); $(body).mCustomScrollbar({ callbacks:{ whileScrolling:function(){ var pos=this.mcs.top,$menu=$("#menu"); if(pos<-300 && $menu.hasClass("default")){ /* show fixed menu code... */ $menu.fadeOut('fast',function(){ $(this).removeClass("default") .addClass("fixed transbg") .fadeIn('fast'); }); }else{ if($menu.hasClass("fixed")){ /* hide fixed menu code... */ $menu.fadeOut('fast',function(){ $(this).removeClass("fixed transbg") .addClass("default") .fadeIn('fast'); }); } } } } }); $menu.hover( function(){ if( $(this).hasClass('fixed') ){ $(this).removeClass('transbg'); } }, function(){ if( $(this).hasClass('fixed') ){ $(this).addClass('transbg'); } });//hover });//jQuery

        Reply
        • malihu
          Posted on November 30, 2014 at 18:55 Permalink

          Oh I see…

          Change callback conditions to:
          if(pos<-300){ if($menu.hasClass("default")){ $menu.stop().fadeOut('fast',function(){ $(this).removeClass("default") .addClass("fixed transbg") .fadeIn('fast'); }); } }else{ if($menu.hasClass("fixed")){ $menu.stop().fadeOut('fast',function(){ $(this).removeClass("fixed transbg") .addClass("default") .fadeIn('fast'); }); } }

          Also, is the following correct?
          $(body).mCustomScrollbar({ ...
          Cause body is not a variable defined anywhere(?). Maybe it should be:
          $("body").mCustomScrollbar({ ...

          Reply
          • Eric
            Posted on December 1, 2014 at 14:30 Permalink

            Thank you very much, it worked. But then there was another little problem. Now scroll shows an arbitrary topic. You can do something so that was the subject of minimal-dark1?

            theme: "minimal-dark1", scrollInertia: 810 autoHideScrollbar: three

            How does this tie to the code?

        • malihu
          Posted on December 1, 2014 at 17:21 Permalink

          These are all option parameters (same as callbacks):
          $("body").mCustomScrollbar({ theme: "minimal-dark", scrollInertia: 810, callbacks:{ /* callbacks code */ } });

          Reply
          • Erik
            Posted on December 2, 2014 at 17:21 Permalink

            Thank you so much! Now everything works fine. Good luck to you!

  6. aaysha
    Posted on November 21, 2014 at 15:26 Permalink

    hello , we are using a div that get get on ajax call, then how we do have to use this custome scroll js after updating the inner html as on load this div is display none default.

    Thanks

    Reply
    • malihu
      Posted on November 21, 2014 at 16:01 Permalink

      Is the div element generated on ajax call or the element exists in the HTML and its content changes by ajax? In the first case you just call mCustomScrollbar after your element is generated. In the second case you use $(selector).mCustomScrollbar("update"); after you content has changed.

      Note that when plugin has initialized, the actual content resides inside .mCSB_container div, so to modify it, you can do something like:
      $("#my-element-id .mCSB_container").html("content"); $("#my-element-id").mCustomScrollbar("update");

      The plugin archive contains examples of ajax and initially hidden elements.

      Reply
      • aaysha
        Posted on November 21, 2014 at 16:22 Permalink

        Thanks a lot, it’s working… πŸ˜€

        Reply
        • malihu
          Posted on November 21, 2014 at 20:48 Permalink

          You’re welcome. I edited my answer above as I made an error and it wasn’t very clear.

          Reply
  7. abc
    Posted on November 21, 2014 at 13:08 Permalink

    dude, you’re awesome, especially taking so much time to help people using your plugin, with helpful and prompt replies.
    great work, man

    Reply
    • malihu
      Posted on November 21, 2014 at 13:38 Permalink

      Thanks! I try to make time each day for replies, support etc.

      Reply
  8. Elsa
    Posted on November 20, 2014 at 16:53 Permalink

    First, thanks for this plugin.

    I’m trying to use the “dark” theme but it doesn’t show anywhere inside the ul, when I inspect in the browser I have to add a width, position: absolute and a background-color and it shows in the left side. Can you help me? Thanks a lot.

    Reply
    • Elsa
      Posted on November 20, 2014 at 17:30 Permalink

      Update:

      The scroll bar shows when I hover the right border. Is this normal? or it should show always?

      Reply
      • malihu
        Posted on November 20, 2014 at 19:52 Permalink

        No it should always be visible. Can’t really say what might be wrong but it sounds it’s something with your CSS. Note that elements with vertical scrollbar need a height/max-height value and elements with horizontal scrollbar need a width/max-width.

        Reply
  9. badri
    Posted on November 20, 2014 at 12:03 Permalink

    It is not working for ie9 please help me sort this out.

    Reply
    • malihu
      Posted on November 20, 2014 at 15:20 Permalink

      I need more info on this to be able to help (your page link, testing environment etc.).

      The plugin is tested and works as expected in IE9 (version 9.0.8112.16421) under Windows Vista (service pack 2).

      Reply
    • badri
      Posted on November 20, 2014 at 16:21 Permalink

      wondows7 professional and ie9
      pelase dowload from link.
      https://www.dropbox.com/s/kiy1nc4nar3674e/zzzzz.html?dl=0

      Reply
      • malihu
        Posted on November 20, 2014 at 19:48 Permalink

        Your element (#article) needs a height (or max-height) value.

        Reply
        • badri
          Posted on November 21, 2014 at 07:22 Permalink

          It worked,Thank you!!!

          Reply
  10. Michael Bryzgalov
    Posted on November 20, 2014 at 03:45 Permalink

    1. What is stupid code?
    _delete: function (p) { try { delete p } catch (e) { p=null } }
    The right code is:
    _delete: function (context, member) { try { delete context[member] } catch (e) { context[member] = undefined } }
    And then use:
    functions._delete(value, 'member')

    2. The global last parameter: undefined does not used anywhere!
    Instead it:
    if (typeof value != "undefined")

    3. The jQuery has static method $.isNumeric(value)!
    What is purpose to use functions._isNumeric(value) that implement same code as jQuery $.isNumeric?

    4. Instead code:
    if (typeof value == 'function')
    Use code
    if ($.isFunction(val))

    5. Why did not obfuscated the names of all private members: functions._XXX? The minified code is very redundant!

    Reply
    • malihu
      Posted on November 20, 2014 at 05:42 Permalink

      Thanks for the feedback!

      1. What would be the benefit of delete c[m] instead of delete c.m in the script? Aren’t the same thing? Your suggested function would require more code (to be passed as function parameters/vars).

      2. undefined parameter will be removed in next version.

      3. $.isNumeric was added in jQuery version 1.7 but the plugin still supports 1.6.0.

      4. I cannot see a benefit of using $.isFunction vs typeof in the script ($.isFunction is also a bit slower). Can you elaborate more on this?

      5. I wanted to make function names clear (as to what they do). Not sure how much difference would it make though.

      Reply
      • Michael Bryzgalov
        Posted on November 20, 2014 at 16:16 Permalink

        1. In Your original code used
        var functions={ // PlugIn private methods ... /* deletes a property (avoiding the exception thrown by IE) */ _delete:function(p){ try{delete p;}catch(e){p=null;} }, /* -------------------- */ // PlugIn private methods ... } // Does not delete liveTimers[selector] functions._delete.call(null,liveTimers[selector]); // Does not delete this.mcs functions._delete.call(null,this.mcs); // Does not delete $this[0]._focusTimeout functions._delete.call(null,$this[0]._focusTimeout); // Does not delete mCSB_container[0].onCompleteTimeout functions._delete.call(null,mCSB_container[0].onCompleteTimeout); // Does not delete mCSB_container[0].autoUpdate functions._delete.call(null,mCSB_container[0].autoUpdate); // Does not delete d.sequential.step functions._delete.call(null,d.sequential.step);
        2 – 5. The size of minified code will be lower
        3. It’s not actual now (jQuery version 1.6.0)

        Reply
        • malihu
          Posted on November 20, 2014 at 18:34 Permalink

          Thanks! I’ll update the function in the next version and try to make the minified code size less.

          3. The plugin does work with 1.6.0. Changing _isNumeric to $.isNumeric doesn’t.

          Reply
  11. Sameer Ali
    Posted on November 19, 2014 at 13:43 Permalink

    Hi,
    Thanks for share this great thing.
    I’m using this plugin in my site. Its working fine but i need your help to fix a bug.
    I have a list of few videos in scroller. when someone click on video list item the scroller should scroll to current clicked item

    you can check here http://faisalabad.lokpunjab.org/#video_player_wrapper
    I try to do this with this code
    jQuery('.realted_mutlimedia .video_list').click(function(){ var scroll = jQuery(this).index()*list_height; jQuery('.realted_mutlimedia').mCustomScrollbar("scrollTo",scroll); });
    It will be good if you reply me on my mail address.
    Thank alot

    Reply
  12. Adi
    Posted on November 18, 2014 at 07:55 Permalink

    Hi,
    Thanks very much for the hard work you put into this.
    I’m looking to use this plugin in my SharePoint portal site.
    The thing in SharePoint is that any content you create is hosted inside SharePoint components (like Webparts) and you cannot really control this. Meaning, I cannot wrap a webpart with my own div that has your class.
    Can I set the plugin to generally work everywhere? To make it work where any scroll bar appears?

    Thanks!

    Reply
    • malihu
      Posted on November 18, 2014 at 12:09 Permalink

      The plugin will work on any jquery selector as long as the element has the proper CSS properties set (e.g. height, max-height, overflow etc.) and it’s able to generate the necessary markup.

      Reply
      • Adi
        Posted on November 18, 2014 at 12:24 Permalink

        Thanks a lot again for such a professional plugin.

        Reply
  13. roabhi
    Posted on November 17, 2014 at 20:17 Permalink

    Hi there.

    First of all thanks for sharing this resource man!.

    Is there a way to set the scrollbar container to a fixed size instead of always having the same size the overflowed:auto/hidden parent has? The goal would be to have a very lenghtly container (scrolling area) with a much more small dragger and dragger container.

    IΒ΄ve tried using the autoDraggerLength: true method but this only changes the dragger portion of the component which causes the scrollbar container to look too long and out of proportion compared to the dragger.

    Thank you!.

    Reply
    • malihu
      Posted on November 17, 2014 at 21:15 Permalink

      All scrollbar styling is done via CSS. Specifically, the vertical scrollbar is defined on line 65 of jquery.mCustomScrollbar.css. For example, to set a fixed height you can do:
      .mCSB_scrollTools{ position: absolute; width: 16px; height: 200px; left: auto; top: 0; right: 0; }

      You can set its size however you like, e.g.:

      .mCSB_scrollTools{ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; margin: 50px 0; }

      or even:

      .mCSB_scrollTools{ position: absolute; width: 16px; height: 50%; left: auto; top: 25%; right: 0; }

      Reply
      • roabhi
        Posted on November 19, 2014 at 13:56 Permalink

        Thanks for the quick reply man.

        I ended up by changing the values from the selector at line 156 instead which seems to control the actual width of the horizontal scroll container. IΒ΄m leaving it here for the record just in case someoneΒ΄s looking for the same thing:

        .mCSB_scrollTools.mCSB_scrollTools_horizontal{ /*width: auto; <---- Original Value*/ width:500px; /*New value */ height: 16px; top: auto; right: 0; bottom: 0; left: 0; }

        It is actually pretty awesome that you left styling dimensions out of the script. I like this modular approach a lot.

        Thanks again!.

        Reply
  14. Mirko
    Posted on November 17, 2014 at 14:20 Permalink

    Hi is it possible to have something like a ‘delta’ scrolling? According to the docs, I can define the position in pixels to scroll to, but can I say “scroll x px further down” from the current position? Thx

    Reply
    • malihu
      Posted on November 17, 2014 at 16:31 Permalink

      Yes you can (docs need updating sorry). You can do it like this:
      $(selector).mCustomScrollbar("scrollTo","-=100");
      or:
      $(selector).mCustomScrollbar("scrollTo","+=100");

      And for position defined in a variable:
      var to=100; $(selector).mCustomScrollbar("scrollTo","-="+to);

      Reply
      • Jairo
        Posted on November 26, 2014 at 06:21 Permalink

        It’s very important, I agree with you upgrade, there are many tearing your hair out with this. Thank you for this wonderful plugin

        Reply
  15. Maria
    Posted on November 17, 2014 at 12:46 Permalink

    Hi! I do love your scrollbar.
    But I have some problems with
    axis:”x”
    in Safari.

    in html I have this:

    And

    $(document).ready(function() {
    $(‘.news’).mCustomScrollbar({
    scrollInertia:100,
    autoDraggerLength: false,
    axis:”x”});
    });

    In Safary I dont see neither images in tags nor Scrollbar
    Could you help me please?
    http://www.toguchi.ru/test.html

    Reply
    • malihu
      Posted on November 17, 2014 at 14:14 Permalink

      Hi,
      I think you need to give your table a width value in pixels. Either this or maybe call plugin function on window load (instead document ready):
      $(window).load(function() { ... });

      Reply
  16. tm
    Posted on November 15, 2014 at 10:23 Permalink

    how can I add this to dynamically generated content.
    I’ve added mCustomScrollbar to a div inside of which, I’m changing the content using .html().

    The scroll-bar shows up in the old content if it is created statically but disappears in the newly generated one.

    What can I do?

    Reply
    • malihu
      Posted on November 15, 2014 at 10:41 Permalink

      New content must be added inside .mCSB_container div and not directly inside your element, e.g. $("#element-id .mCSB_container").html(...);

      Reply
  17. Sean Loyless
    Posted on November 15, 2014 at 00:05 Permalink

    Hi there! I love your script, it’s very well done and smooth as silk.

    I’m having an issue with the horizontal scroll and the magic mouse/touchpad. When I swipe left, the page scrolls right, and vice versa. The functionality works correctly using the scrollbar, keyboard, and mouse wheel. Only the touchpad seems to be behaving backwards.

    Here’s my options for clarification:
    $($mapWindow).addClass('mCustomScrollbar fluid').mCustomScrollbar({ axis: "x", theme: "dark", mouseWheel: { invert: true }, mouseWheel: { axis: "x" }, keyboard: { enable: true } });

    Any suggestions to fix the touchpad inversion problem?

    Reply
    • malihu
      Posted on November 15, 2014 at 02:54 Permalink

      Hi,

      You have mouseWheel: { invert: true }, which inverts mouse-wheel scrolling direction. Normally it should be false (or removed). Did you try testing this option or?

      Reply
      • Sean Loyless
        Posted on November 15, 2014 at 22:45 Permalink

        I did, and unfortunately it had no effect over horizontal swiping.

        Here’s a URL to see it: http://www.wellspringstones.com/cartography/wellness

        Reply
        • malihu
          Posted on November 16, 2014 at 23:25 Permalink

          Well I can’t really say why this happens (I don’t have a mac/magic mouse to test it). There’s no known issue of this behavior although I don’t know if magic mouse works this way by default (does it behave the same when using browser’s native horizontal scrollbar?).

          I tested your page on my iPad and it works correctly. I thought magic mouse used the mouse-wheel event/values but since the invert option has no effect, seems it doesn’t.

          It probably uses the touch event(?) which does work correctly on iPad, Android etc. but it’s probably inverted by the OS for mouse. I’m just guessing here but maybe there’s an option for magic mouse to invert touch-scrolling?

          Reply
          • Sean Loyless
            Posted on November 17, 2014 at 17:28 Permalink

            Just for clarification: Magic Mouse = Touch Pad. It’s the same functionality.

            You are correct, but I currently have that disabled. Apple calls it “natural scrolling” but it’s the reverse of how we’ve all learned to use a mouse/touchpad over the years.

            I just “enabled” the natural scroll on my OS X settings and the scroll behaves the correct way. It looks like the logic just needs to be flipped for touchpads?

        • malihu
          Posted on November 17, 2014 at 18:02 Permalink

          Unfortunately there’s no way to differentiate between mouse and touchpad with javascript.

          Reply
  18. Bizzaro
    Posted on November 14, 2014 at 12:13 Permalink

    Is there a way to get this to work with an iframe targeting pages on the same server?

    Reply
    • malihu
      Posted on November 14, 2014 at 12:18 Permalink

      See iframe_example.html in plugin archive (online demo: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/iframe_example.html)

      Reply
    • Bizzaro
      Posted on November 14, 2014 at 12:45 Permalink

      I found the iframe example page you have on github, however it is not reacting at all the same way your example page is for some reason. It loads the external page and then vanishes. You can see what I mean here – http://leepresson.com/slang.php

      Reply
      • malihu
        Posted on November 14, 2014 at 13:06 Permalink

        Your #iframe-container needs a height value (e.g. height: 300px;).

        Reply
        • Bizzaro
          Posted on November 14, 2014 at 17:54 Permalink

          Ah, the example didn’t have a height listed in the CSS code so I did not put it for some reason. It works but not entirely. It stops halfway down the page embedded in the iframe for some reason.

          If I increase the height of the iframe, more is visible but that seems like a bad fix.

          Reply
          • malihu
            Posted on November 14, 2014 at 18:59 Permalink

            No, increasing iframe height is exactly what you need to do, since your iframe’s content is about 1400px and your iframe height is just 700px.

            The custom scrollbar scrolls the entire iframe (1400px) within its height (300px). This is the only way js scrollbars work as they cannot access or modify iframe contents (iframes are different documents).

  19. Vijay
    Posted on November 13, 2014 at 15:36 Permalink

    jQuery custom content scroller is very very slow in safari browser. can u give me the solution?

    Reply
    • malihu
      Posted on November 13, 2014 at 22:10 Permalink

      I need more info about the OS, device, browser version and what kind of content is scrolled.
      There’s no known issue for Safari but performance depends on many things like OS, browser, hardware and content. Do you see the same performance on the demo pages? Can you send me a link?

      Reply
  20. Gavin
    Posted on November 13, 2014 at 06:31 Permalink

    Trying to use the JS in a responsive layout and an x-axis overflow situation.
    The container overflowing fills the horizontal viewport on mobile devices, and the horizontal scroll works wonderfully.
    However, trying to scroll the whole containing page vertically on the device doesn’t work if the touch event starts in the overflow element.
    Is there a way of allowing normal vertical, whole page scroll behaviour if a user starts a vertical scroll by touching the screen on a horizontally overflowed element?
    As a result, the user can scroll down and into the x-axis overflowed element, but can’t vertically scroll back out…

    Reply
    • malihu
      Posted on November 13, 2014 at 22:44 Permalink

      In latest version (3.0.5) you should be able to scroll the page while touch-swiping vertically a horizontal scrollbar (at least on iOS). Can you send me your page link?

      Reply
      • Gavin
        Posted on November 21, 2014 at 02:52 Permalink

        Hi Malihu,

        The bug is on Android 4.3, Chrome 39 and your latest 3.0.5 for definite.

        On the same Android biuld, Firefox works fine.

        So might be Chrome / Android+Webkit specific?

        Can’t provide a link sadly as it’s a commercially sensitive build.

        Will try on iOS.

        Reply
        • malihu
          Posted on November 21, 2014 at 12:53 Permalink

          I’ll check Chrome on Android and see if I can fix it on the next version. Thanks for the feedback πŸ™‚

          Reply
        • Nick Jag
          Posted on November 21, 2014 at 21:24 Permalink

          I can confirm this issue, I was having the same problem in Chrome on Android. Other than that, script is incredible.

          Reply
          • malihu
            Posted on December 29, 2014 at 17:53 Permalink

            This is fixed in latest version (3.0.7)
            Thanks for the feedback!

  21. Ashil John
    Posted on November 13, 2014 at 05:15 Permalink

    The ‘Configuration’ section on your website with the class=”articles” has a css property of margin-right for devices larger that 1024px:

    @media only screen and (min-width: 1024px)
    .articles {
    margin-right: 380px;
    }

    on line 8 in ‘style.css’.

    Removing that gives a much better viewing and reading experience! πŸ™‚ Especially not having to scroll horizontally to read the entire description, and then to scroll back over to the start again.

    Thank you for an excellent plugin. Works great.

    Reply
    • malihu
      Posted on November 13, 2014 at 22:47 Permalink

      The margin-right: 380px; rule is for positioning website’s sidebar. I’m still working on a better solution though. Thanks for the feedback.

      Reply
  22. Dimitri
    Posted on November 13, 2014 at 00:44 Permalink

    Hello ! We’ve made a funny website for a french pop-band with your excellent plugin on two of our page.
    In this page http://andreasetnicolas.com/goodies.php at the bottom, we have a scrollbar with the wallpaper section. But I would to have the arrows and they don’t appear… do you have an idea of what goes wrong ?
    In the medias.php page, we use the same configuration and its work 0____o

    Thanks for the help !!

    Reply
    • malihu
      Posted on November 13, 2014 at 02:44 Permalink

      In your style.css on line 1109 you have: .choix_wallp a{ ... }. This affects all anchor tags inside .choix_wallp, including plugin’s anchor buttons (which become hidden as they get floated left).

      Just change the CSS selector to: .choix_wallp li a{ ... } so you can apply the style you want only on anchors inside list-items πŸ˜‰

      Reply
      • Dimitri
        Posted on November 18, 2014 at 00:58 Permalink

        Oh yeeah ! It works, that was my fault >___<
        Thanks for the speed of answer and for the time you took on my issue πŸ˜‰

        Reply
  23. Guy
    Posted on November 12, 2014 at 23:16 Permalink

    Hello,

    First, thank you so much for your hard work on this! I have it on my site, implementation was smooth and it is working amazingly.

    One thing I want to do is have the scroll bar appear to the left of the content, rather than the right as it is by default. Would it be possible to do this and if so, how?

    Thanks in advance!
    Guy

    Reply
    • malihu
      Posted on November 13, 2014 at 22:02 Permalink

      If you want general right-to-left direction you simply add dir="rtl" to your HTML/element(s).

      To just place the scrollbar on left, edit jquery.mCustomScrollbar.css. For the default scrollbar, change line 71 from: right: 0; to: right: auto; and line 54 from: margin-right: 30px; to: margin-right: 0; margin-left: 30px;.

      You can of course overwrite these rules in another CSS, for example:
      .your-class .mCSB_scrollTools{ right: auto; } .your-class .mCSB_inside > .mCSB_container{ margin-right: 0; margin-left: 30px; }

      In general, the position and appearance of the scrollbar is done in jquery.mCustomScrollbar.css (see section 2 “VERTICAL SCROLLBAR” in CSS).

      Reply
  24. Erin
    Posted on November 12, 2014 at 18:06 Permalink

    Hello!
    Pretty new to this and I’m stuck!
    So I am using the “dark” theme. I have two custom content scrollers set up right next to each other (similar to how it looks like your page that shows all of your themes.) I want both content scroller’s to be ‘dark” themed. However the second one looks as though all the styles have been taken off of it and just has the basic bar- not the “dark” bar.

    I assume it must have something to do with the styling and maybe an ID?

    Reply
    • malihu
      Posted on November 12, 2014 at 21:03 Permalink

      Can’t really say why this happens as I don’t know your html/js but if you have 2 elements, each one with a unique id, you can do:
      $("#id-1,#id-2").mCustomScrollbar({ theme:"dark" });

      If your elements share the same class, you can do:
      $(".class-name").mCustomScrollbar({ theme:"dark" });

      Reply
  25. Ishmael
    Posted on November 11, 2014 at 08:50 Permalink

    Hi –

    I have a simple email form that sits inside of a custom scrollbar window. I would like to redirect the user to a thank you page again another custom scrollbar window once they click the submit button. I have tried Send However it does not pick up the thank you custom scrollbar window.

    Also how do I get the script to load the a specific custom scrollbar window when the page loads for the first time. At the moment it loads to a empty page and the custom scrollbar window only appears when the user clicks on a link.

    Reply
    • Ishmael
      Posted on November 11, 2014 at 08:52 Permalink

      This is the code I tried:

      <button class="contact-email-submit" type="submit" onclick="location.hash = '#contact-thank-you';">Send</button>

      Reply
  26. Henry
    Posted on November 11, 2014 at 03:44 Permalink

    Hi, I have a question, still related with Bootstrap dropdown issue. So I made a dropdown with custom scroll implemented on int. And then I made another DIV element to trigger that particular dropdown with a scrollTo event. If you see the attach jsfiddle script, Trigger 2 supposed to trigger the dropdown, while Trigger 1 supposed to trigger the dropdown with 100px scrolled down. But Trigger 1 doesn’t seems to work well. Sometimes it works, but some other times it doesn’t work (and mostly it doesn’t work).

    Are there anything wrong with my script? Thanks.

    Reply
    • Henry
      Posted on November 11, 2014 at 07:38 Permalink

      Here is the link to the issue http://jsfiddle.net/u9pxth1f/

      Thanks.

      Reply
      • Henry
        Posted on November 11, 2014 at 19:26 Permalink

        I had just solved my problem by calling .mCustomScrollbar(“update”) before working on .mCustomScrollbar(“scrollTo”) function.

        Reply
  27. Evgen
    Posted on November 10, 2014 at 15:14 Permalink

    Hi,

    I have a slider and when I try to slide it – the whole page scrolled instead. Is there any solution for this issue? Especially on mobile devices (touch screen).

    Thx.

    Reply
    • Evgen
      Posted on November 10, 2014 at 15:17 Permalink

      You can see it here http://radio.micromir.com.ua/

      Reply
      • malihu
        Posted on November 11, 2014 at 19:34 Permalink

        You slider does slide horizontally but performance seems slow. You can try disabling updateOnImageLoad option and see if it gets better, e.g.:
        $(selector).mCustomScrollbar({ advanced:{ updateOnImageLoad: false } });

        Reply
        • Evgen
          Posted on November 14, 2014 at 16:19 Permalink

          Thx for your reply.

          Your comment slightly improve performance. But you probably do not understand the problem. On the desktop, everything looks fine, but on mobile devices it is impossible slider slides vertically – when you try to do it freezes. Unplug your script and the slider is working correctly.

          Reply
          • malihu
            Posted on November 14, 2014 at 16:38 Permalink

            Can you try disabling both updateOnImageLoad and updateOnContentResize and see if it doesn’t freeze? If you can change it on your live site I’d be able to check it too (on http://radio.micromir.com.ua/ updateOnImageLoad is still enabled).

        • Evgen
          Posted on November 14, 2014 at 16:51 Permalink

          Disabling updateOnContentResize leads to turning off the scrollbar at all.
          I made these changes on the live site so you can see them

          Reply
          • malihu
            Posted on November 14, 2014 at 17:20 Permalink

            Ok just re-enable updateOnContentResize

        • Evgen
          Posted on November 14, 2014 at 18:05 Permalink

          Re-enabled. But slider still does not work =(

          Reply
          • malihu
            Posted on November 14, 2014 at 19:09 Permalink

            Well it seems there’s some conflict between the scrollbar and some other script (slider or some other?) on touch. Maybe the slider does not allow touch event bubbling(?) but I can’t be sure. If you disable the sliders maybe we could see if there’s some conflict among these scripts.

  28. mystica
    Posted on November 9, 2014 at 16:50 Permalink

    Hi,
    i’m using your plugin on this website
    http://www.unioneimpreseitaliane.it/web
    if you click on the links on the left, ths scrollto id works fine
    however, i would like the scrolling to stop some pixels before the id so that there is more space between the container and the title of the box
    i tried with the offset, but i’m not sure how and where to add it
    this is my code:

    <script> $(function(){ $(window).load(function(){ $("#main").mCustomScrollbar({ axis:"x", horizontalScroll:true, scrollInertia:1100, advanced:{ autoExpandHorizontalScroll:false }, /*, callbacks:{ onScroll:function() { alert("scrolled..."); } }, scrollButtons:{ enable:true }*/ }); /* Navigation */ $(".menu_sidebar a").click(function(){ axis:"x"; var myid= $(this).attr("href"); $(".menu_sidebar a").removeClass('selected'); $(this).addClass('selected'); $("#main").mCustomScrollbar("scrollTo","" + myid + ""); }); }); })(jQuery); </script>

    thanks!

    Reply
    • malihu
      Posted on November 10, 2014 at 04:58 Permalink

      Give your target elements (e.g. #media, #servizi, #eventi etc.) a negative left margin that will act as offset. For example:
      #media, #servizi, #eventi{ margin-left: -40px; }

      Because your target elements are not positioned equally, you might need to adjust each one separately, e.g.:
      #media{ margin-left: -40px; } #eventi{ margin-left: -40px; padding-left: 40px; } /* etc. */

      Reply
  29. Eugene
    Posted on November 8, 2014 at 06:18 Permalink

    Hi.
    Confirm this issue – http://manos.malihu.gr/jquery-custom-content-scroller/comment-page-54/#comment-18096

    Let’s say i have a sidebar with navigation, i’m using jquery’s slideToggle() for the accordion-like menu. Assume active link is on top of the page and expanded (with child items). Then i scroll down to the bottom of the nav and click on the last item which also has child items. If height of the second expanded menu item is bigger than the first one, the whole navigation jumps. I think it’s something related to live updating of the scroll bar position. Pretty annoying issue, plugin works perfectly everywhere, except this case πŸ™
    I’ve tried to disable it on nav item click and re-enable on slideUp() complete, it works, but now it jumps in another way πŸ™‚

    Could you please take a look at this issue?

    Thanks

    Reply
    • malihu
      Posted on November 8, 2014 at 14:40 Permalink

      Hi,

      I’d need to see the issue online but maybe you could disable auto-updating (advanced:{ updateOnContentResize: false }) and call the update method manually after slideToggle?

      Reply
      • Eugene
        Posted on November 9, 2014 at 13:27 Permalink

        Hi there.
        Thanks for a quick reply.

        Unfortunately i’ve tested this solution before, it does work, but not as smooth as expected.

        I’ve created a demo page where you can see the issue. Just scroll down at the very bottom and click “CLICK ME” menu item, you’ll see how navigation shrinks. This happens only if “CLICK ME” content is higher than “ACTIVE” menu item content.

        You can also download these demo files if you want to play with the code.

        This is a very powerful plugin, but unfortunately this issue makes it almost useless for fixed navigation from the UI point of view πŸ™

        Anyway, i’d love to make a donation for your great support and great job you did with this plugin.

        Thanks!

        Reply
        • malihu
          Posted on November 10, 2014 at 04:31 Permalink

          Hey,

          I saw what you mean and I did some tests with the files you posted. I’ll send you the feedback via email πŸ™‚

          Reply
        • Kris
          Posted on November 20, 2014 at 22:12 Permalink

          I have the same problem :/ did you find a solution?

          Reply
          • malihu
            Posted on November 20, 2014 at 22:37 Permalink

            Yes. It depends on your markup/layout/script but the solution is to use plugin’s whileScrolling callback to stop and update the scrollbar.

            Example:
            var clicked=0; $(selector).mCustomScrollbar({ callbacks:{ whileScrolling:function(){ if(this.mcs.topPct===100){ $(selector).mCustomScrollbar("stop"); }else{ if(clicked===1){ $(selector).mCustomScrollbar("update"); } } } } }); /* later on... */ $(element).on("click", function(e){ clicked=1; $(other_element).slideToggle(400, function(){ clicked=0; }); });

      • Eugene
        Posted on November 9, 2014 at 13:32 Permalink

        Sorry, this is a correct link to the online demo.

        Reply
  30. A6000
    Posted on November 7, 2014 at 16:50 Permalink

    Hi there Malihu,

    I’m using bootstrap 3.20 + latest Silvio Moreto’s bootstrap-select plugin + your plugin and I’m having a problem with dropdowns. Namely, whenever I click on scrollbar or it’s buttons dropdown closes. How can I prevent this from happening. Thanx in advance.

    here’s my config:

    $(‘ul.selectpicker’).mCustomScrollbar({
    theme:”inset-dark”,
    contentTouchScroll: true,
    scrollButtons:{
    enable:true
    }
    });

    Reply
    • malihu
      Posted on November 8, 2014 at 00:34 Permalink

      Hello,

      In order for this to work properly, you’ll need to add the following code after your mCustomScrollbar function call:

      $(".dropdown-menu, html").on("mouseup pointerup",function(e){ $(".dropdown-menu .mCSB_scrollTools").removeClass("mCSB_scrollTools_onDrag"); }).on("click",function(e){ if($(e.target).parents(".mCSB_scrollTools").length || $(".dropdown-menu .mCSB_scrollTools").hasClass("mCSB_scrollTools_onDrag")){ e.stopPropagation(); } });

      It’s a tiny “hack” to prevent closing the dropdowns when dragging the scrollbar πŸ˜‰

      Reply
      • A6000
        Posted on November 9, 2014 at 01:42 Permalink

        Thanx a lot! It works! πŸ™‚ yay!

        Reply

Comments pages: 1 54 55 56 57 58 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