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 2 3 4 5 84

  1. Penny
    Posted on March 18, 2011 at 20:32 Permalink

    I got this to work on most browsers. Thanks.

    But, any ideas for getting it to work on an iPad?

    Reply
    • malihu
      Posted on March 19, 2011 at 01:47 Permalink

      Hello Penny,
      As far as I know iPad doesn’t support any of the normal jquery event functions other than click. This script utilizes many more including drag, press etc. that are required for any js custom scrollbar. There are specific custom libraries for iPad out there, but I rarely use them as I never develop for specific browsers or devices.

      The best way to support iPad using this script, is to write a condition that checks for iOS and apply the code inside the <noscript> which essentially activates a native browser scrollbar on the container.

      Reply
      • fresno
        Posted on April 16, 2011 at 13:02 Permalink

        Hi, Does anybody knowhHow can I check it using jquery.support function? jquery.browser is deprecated soon, so the way to do it is with jquery.support, but I can´t figure out how to make this possible..

        Great Scrollbar, really nice code!!

        Reply
      • malihu
        Posted on April 16, 2011 at 16:42 Permalink

        @fresno
        Although jquery.support seems the “right” way to go, most of the times jquery.browser is the easiest-most efficient way to implement.
        The “problem” with jquery.support is that it requires the development of feature detect plugins to recognize bugs/browser issues.

        Reply
      • Nick
        Posted on September 4, 2011 at 08:40 Permalink

        Hey man, thanks for this, absolutely love it!

        Only problem im having is with the ipad/iphone detect. Would you mind letting me know exactly what I need to put and where it goes in order to get a scrollbar on my ipad?

        Cheers,
        Nick

        Reply
  2. malihu
    Posted on March 18, 2011 at 17:41 Permalink

    @jfcolomer
    Try the following quick fix:

    Move mCustomScrollbars(); from $(window).load function to your custom script function. E.g.:
    $(function() { mCustomScrollbars(); var current = 1; ...the rest of your code...

    Reply
    • juanchifc
      Posted on March 18, 2011 at 18:52 Permalink

      Hi friend, thanks for your quick fix, now it shows the dragger correctly but the scroller doesn’t works. I’ve uploaded the new fix to the web http://www.sailingcharterbaleares.com

      I’ll try to fix it, thanks for your support 😉

      Reply
    • malihu
      Posted on March 19, 2011 at 01:34 Permalink

      Try putting the mCustomScrollbars function as a callback in the animate() function of content block. I’ve check your script and I understand correctly the function you load description is “display”. If so you can do it like this:
      $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){ $('p',$(this)).html(info_elem.find('.info_description').html()); $(this).animate({'bottom':'0px'},400,'easeInOutQuad',function(){ mCustomScrollbars(); }); })
      Note the callback function after the “‘easeInOutQuad” parameter.

      Reply
      • Juan
        Posted on March 24, 2011 at 18:25 Permalink

        Hi friend, thanks for your quickly answer but when putting the mCustomScrollbars function as a callback in the animate() function, the carrousel does not work like it should, so I’m not sure what to do now :S

        http://www.sailingcharterbaleares.com

        Juan 😉

        Reply
      • Exodius
        Posted on July 31, 2012 at 17:10 Permalink

        Thank you Malihu,

        This worked for me (puttin in the callback function of a slideUp).

        Reply
  3. Rob
    Posted on March 17, 2011 at 04:58 Permalink

    Hi malihu,

    great scroller! I am using it on this site http://188.65.32.28/thebull/ If you click the read more button at the top right, you will see it is loading more text with jQuery slideToggle. If you click it again – now read less, the scroller appears to adjust for the new content. BUT I need the scroller to appear when first clicked. If you view source you will see that I am calling mCustomScrollbars(); after the click function. I just cant seem to get the scrollbar to appear when the read more is clicked. If you could have a look that would be great.

    Thanks

    $(document).ready(function(){ $(".toggle_container").hide(); $("div.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); $("a.trig").text($("a.trig").text() == 'READ MORE' ? 'READ LESS' : 'READ MORE'); mCustomScrollbars(); return false; //Prevent the browser jump to the link anchor }); });

    Reply
    • Rob
      Posted on March 17, 2011 at 07:36 Permalink

      Just an update: I added this:

      $(document).ready(function(){ $(".toggle_container").hide(); $("div.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); $("a.trig").text($("a.trig").text() == 'READ MORE' ? 'READ LESS' : 'READ MORE'); //mCustomScrollbars(); $("#scroll-left-container").mCustomScrollbar("vertical",900,"easeOutCirc",1.02,"fixed","yes","no",0); return false; }); });

      but got the same result – scrollbar is added only on second click of the read more button.

      Thanks

      Reply
      • jfcolomer
        Posted on March 17, 2011 at 21:29 Permalink

        Hi! first of all,congratulations because of your great post, very good examples and explaining 😉

        So, I’ve tried to readjust it to my sizes,styles with no problem, but when I’m no longer able to make it run over my web (www.sailingcharterbaleares.com)

        The problem is, I’ve coded a rotator menu where once you’ve selected a link, the content change and show its correspondent description, so I’ve added your structure to each of my diferent description classes.

        I can visualize each description with its scrollbar correctly, but at the end, whe adding the script source before of the tag, the scrollbar dissapears.

        So, could you ckeck the site I’m developing to have an idea of the problem?

        Thanks and congratulations again 😉

        Reply
  4. Alvaro
    Posted on March 15, 2011 at 14:29 Permalink

    Hi again!

    This is the source code of my website:
    http://dl.dropbox.com/u/20510467/scrollbartest.rtf

    I think that the problem is in
    load(function() {$(“#mcs_container”).mCustomScrollbar
    because the #mcs_container is in other divs

    It is posible? How can I solve it?

    Thanks

    Reply
    • malihu
      Posted on March 15, 2011 at 17:27 Permalink

      Hi Alvaro,
      I can’t really help unless I check the page somewhere online, along with valid links to its related documents (not localhost)

      Reply
      • Alvaro
        Posted on March 15, 2011 at 22:19 Permalink

        Hi malihu.
        Im so sorry. My client would cut my neck if I show the website to somebody ;).
        I have uploaded a video where I show the problem. I hope that it is enough.

        http://dl.dropbox.com/u/20510467/001.mov

        The website is a store based in Prestashop. Maybe it help you.

        Thanks for all,

        Reply
      • jfcolomer
        Posted on March 17, 2011 at 21:32 Permalink

        Hi! first of all,congratulations because of your great post, very good examples and explaining 😉

        So, I’ve tried to readjust it to my sizes,styles with no problem, but when I’m no longer able to make it run over my web (www.sailingcharterbaleares.com)

        The problem is, I’ve coded a rotator menu where once you’ve selected a link, the content change and show its correspondent description, so I’ve added your structure to each of my diferent description classes.

        I can visualize each description with its scrollbar correctly, but at the end, whe adding the script source before of the tag, the scrollbar dissapears.

        So, could you ckeck the site I’m developing to have an idea of the problem?

        Thanks and congratulations again 😉

        Reply
  5. Alvaro
    Posted on March 15, 2011 at 14:16 Permalink

    Hi.
    Congratulations for your job.
    I have a problem when I tried to implement your scrollbar in my website.
    The scrollbar moves, but the text is fix and it does not move.
    Firefox returns to me the next message:
    Error: too much recursion
    Archivo de origen: http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
    Línea: 33

    Do you know what the problem is?

    Reply
  6. Chad
    Posted on March 14, 2011 at 06:37 Permalink

    Hey
    Just wanted to let you know that this is exactly what I have been looking for. However, I just cant seem to get it to work. I have it customized to fit my content, but it is not scrolling.
    I have checked my code twice, and to the best of my limited ability, I am very sure I placed everything correctly.
    http://www.aviarycafe.com/nesttest2/eat2.html
    And no making fun of my coding.

    Any tips?

    Reply
    • malihu
      Posted on March 14, 2011 at 06:45 Permalink

      Hello,
      jquery.mCustomScrollbar.js doesn’t seem to load (http://www.aviarycafe.com/nesttest2/jquery.mCustomScrollbar.js gives a 404 error). Try re-uploading it on your server or moving it to the right directory (nesttest2/).

      Reply
      • Chad
        Posted on March 15, 2011 at 02:23 Permalink

        Oh man! It was so simple I missed it… Thanks for the extra pair of eyes. And for the great scroll bar. Enjoy your coffee!

        Reply
  7. Sean
    Posted on March 11, 2011 at 06:02 Permalink

    Love this. Question: I am using the horizontal scroller and would like to start the scrolling from an image other then the first image. Any way to accomplish that?

    Reply
    • malihu
      Posted on March 11, 2011 at 06:51 Permalink

      Sure… Open jquery.mCustomScrollbar.css and add a left value to .dragger (e.g. left:150px). Open jquery.mCustomScrollbar.js and insert:
      ScrollX();
      right below ScrollX function (line: 142).

      Reply
  8. Stewart Small
    Posted on March 11, 2011 at 04:02 Permalink

    Really great script. It was a life saver for me. Used it at http://www.franzgarcia.com.

    Only problem is if the browser isn’t maximized and you scroll all the way to the end and then maximize the browser the scroll-er does not automatically reposition itself.

    Is there a way to do this ?

    Reply
    • malihu
      Posted on March 11, 2011 at 04:26 Permalink

      Thanks for using it 🙂

      After you’ve scrolled to the end and maximize, the second you use the scroller (press, use mousewheel or buttons), it’ll reposition automatically, so the functionality remains intact.

      At the moment, it’s the most efficient way cause it requires no extra coding or removing/adding time intervals etc. just for display purposes for a max-scroll-resize situation.

      Reply
      • Stewart Small
        Posted on March 11, 2011 at 09:38 Permalink

        Hey Malihu,

        Thanks alot. I actually used your advice for Sean below (minus the CSS part) to solve my issue.

        Funny how things work out sometimes. Great script, keep up the good work.

        Reply
    • malihu
      Posted on March 11, 2011 at 16:14 Permalink

      Great 🙂

      Reply
  9. Ahsan R. Shami
    Posted on March 10, 2011 at 23:45 Permalink

    I really, really want to use this plugin on a site I’m building, but I can’t seem to get the scrollbars to appear in a DIV that is toggled on/off.

    I’m more a designer than I am a developer, so, if you have the time, I’d be grateful if you were to let me know what I’m doing wrong here. I don’t understand “callback” and the like, but I do know how to copy/paste. 🙂

    The test link is http://afhashwani.com/v4/04_test.html

    When you click on any of those three links, the overlay box will display, but the scrollbar won’t appear unless you resize the browser window.

    Cheers!

    Reply
    • malihu
      Posted on March 11, 2011 at 04:45 Permalink

      Hello Ahsan,

      Try to move each mCustomScrollbar function inside its relative slideRight function as an animate() callback. For example:

      jQuery(this).animate({width: 'show'},function(){ $("#mcs_container1").mCustomScrollbar("vertical",1000,"easeOutCirc",1.1,"fixed","yes","yes",2); });

      Let me know if it worked

      Reply
  10. Ian Roop
    Posted on March 10, 2011 at 21:30 Permalink

    Hey this scroller is great, thanks a billion, but its acting buggy when used on multiple pages with multiple widths.

    The scroller skips wicked fast towards the end and basically breaks, I’m sure its something I’ve done. Tried giving each .content class an inline width but still breaks.

    Any suggestions?

    Reply
    • Ian Roop
      Posted on March 10, 2011 at 23:10 Permalink

      Nevermind, I saw that little thing about 10,000 pixel animate limit for the jQuery library.

      Whew!

      Killer scroller holmes.

      Reply
  11. gmdev
    Posted on March 10, 2011 at 20:41 Permalink

    Hi!
    Why if i put in “.content” div other floating div the scrollbar go crazy?:)

    Reply
    • malihu
      Posted on March 11, 2011 at 04:50 Permalink

      I can’t tell for sure unless I see the code but generally, when you place a floating div inside another div (like .content) you need a clearfix. For example, after your floating div(s), add another one like this:
      <div style="clear:both;"></div>

      Reply
      • EmmaY
        Posted on August 23, 2011 at 10:07 Permalink

        I’ve tried to use anchors within the scrolling content div, but when I click on the link to go to the anchor, It skips to the right position, but the scroll bar disappears. Is there a way to get anchors working properly in the scrolling div?

        Reply
  12. รับทำเว็บไซต์
    Posted on March 2, 2011 at 17:24 Permalink

    Great work! Really nice stuff in great locations also! Strong impact!

    Reply
    • reese
      Posted on March 4, 2011 at 20:31 Permalink

      Hi, I have a problem regarding a scrolling container with a background image.
      I want the background image to scroll (by setting background-attachment:scroll), but instead it’s always fixed.

      Is this a known issue? How could I solve that?

      Thanks man, awesome plugin

      Reply
      • reese
        Posted on March 4, 2011 at 20:42 Permalink

        I also should mention that my background image is repeated horizontally.

        Reply
      • reese
        Posted on March 4, 2011 at 20:53 Permalink

        me again. Nevermind, I’ve solved the problem 🙂

        Reply
  13. Ryan
    Posted on February 25, 2011 at 23:22 Permalink

    The script it exactly what I am looking for. Though I am running into a problem, maybe you can help.

    Inside .content I have divs that, with jquery toggle from 30px, to 400px. So they slide open. For some reason, and I’ve been testing for days, I can’t figure out why your script doesn’t recognize the new width of .content after the div is toggled open to 400px. I would imagine it would just change the width of .content and the slider would then appear and be functional.

    Maybe you can help?

    Reply
    • malihu
      Posted on February 26, 2011 at 13:57 Permalink

      Hello Ryan!

      Every time content width/height changes dynamically, you need to re-call mCustomScrollbar in order to re-calculate the dimensions and function correctly.

      On your jquery function that toggles width, add a callback function that calls (as an example):
      $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);

      Hope I’ve helped

      Reply
      • Ryan
        Posted on February 26, 2011 at 19:46 Permalink

        I mean… That kind of helped… It triggers the scrollbar to show, but not at the correct time… Perhaps I can send you what I have and you can take a quick look at it. I am sure it’s a quick insert of something or tweak that I’m not ding, but all this is somewhat new to me.

        Reply
  14. Danzig
    Posted on February 25, 2011 at 04:15 Permalink

    This is great.

    There is just one thing that I can’t get to work.
    I want to have links on the page outside the scroll box to anchor links in the scroll box, but when I do this the scroll bar disappears.
    Is there any way to stop this?

    Thanks

    Reply
    • malihu
      Posted on February 26, 2011 at 14:56 Permalink

      I haven’t implemented a scroll-to feature on the plugin yet and there’s no simple way of modifying the script to accomplish such a functionality. If I find some time to implement it, I’ll post an update and let you know.

      Reply
      • braluhr
        Posted on March 10, 2011 at 04:09 Permalink

        Malihu,

        I wouldn’t mind helping out on this scroll-to feature. If you (having knowledge of why/where the code isn’t simple to modify) could point me in the right direction, maybe I could help.

        I tried a month or so ago to do it on my own, but didn’t end up cracking. But if you could point out the areas of the code that you know are the issue, then maybe I could get more focused.

        Reply
  15. Mirco
    Posted on February 23, 2011 at 10:26 Permalink

    Hi!
    This plugin it’s amazing!
    I have only one question, i must insert the scrollbar in a page call with ajax function, how can i do this?
    If I insert the jquery code in the master page, the script doesn’t work, even if I insert the script in the page called by ajax, the code doesn’t work.
    How can I do?
    Thanks

    Reply
    • malihu
      Posted on February 26, 2011 at 15:21 Permalink

      Check the section “Dynamically loaded content” on the post. You should load the script on the master page and re-call mCustomScrollbarevery time you load new content or content that the scroller applies changes.

      Reply
  16. รับทำเว็บไซต์
    Posted on February 22, 2011 at 07:03 Permalink

    hi..! manos
    i use google alert find out u blog..
    Lovin’ your style

    Reply
  17. mo
    Posted on February 19, 2011 at 03:07 Permalink

    Has anyone encountered an issue where the scroller adds to the top position rather than minus so that the scroller runs the wrong way?

    Reply
    • javajester
      Posted on April 24, 2011 at 03:56 Permalink

      Just ran across this condition. It happens with one user who uses a mac keyboard and mac mouse on a pc. The scrollbar is in an asp.net update panel. The first time it displays, it works correctly. After that, it scrolls backwards.

      Another possibly related update panel issue on explorer only, resize throws an error in jquery-1.5.1.js because this.offsetParent is undefined. Wrapped it in a try/catch to keep it from failing.

      Hope to figure it out, this is the best scrolling plugin of the many we’ve evaluated. Great job Malihu!

      Reply
  18. srcastro
    Posted on February 17, 2011 at 23:19 Permalink

    Hi Malihu,

    This is an amazing plugin! 😀 Just a question, for the current version, is it possible to use two scroll bars (vertical and horizontal) for the same content? Or I need to change something? Like adding a new dragger_container?

    Thanks!!

    Reply
  19. Brett
    Posted on February 17, 2011 at 04:13 Permalink

    This is awesome btw. Thanks for doing all the work here. Not sure if I’m missing this, but I’d like to slow down the speed of the scroll when I click and drag the scroll bar. I’m using a horizontal scroll. I’ve slowed down the scroll speed when I use the buttons, but can I do the same when I click and drag the bar?

    Also, I tried changing (var vel = Math.abs(delta*10) to ‘1’ but I’m still getting a wicked fast scroll in safari. Any help would be appreciated. Thanks.

    Reply
    • malihu
      Posted on February 17, 2011 at 15:02 Permalink

      Thanks 🙂
      The “speed” of the scrolling when you click’n’drag the scrollbar is determined by the speed you move the cursor, exactly like the way you scroll with your browser native scrollbar. The only thing that alters the scroll movement is the scroll easing amount that you can increase, decrease or set to 0.

      The vel variable affects scrolling with the mousewheel. Does the extremely fast scroll happen in Safari on OSX? Does it happen when you scroll via a trackpad or with your mousewheel as well?

      Reply
  20. WillSmith
    Posted on February 17, 2011 at 02:51 Permalink

    rKJ8mu Hi! I’m just wondering if i can get in touch with you, since you have amazing content, and i’m thinking of running a couple co- projects! email me pls

    Reply
    • malihu
      Posted on February 17, 2011 at 15:04 Permalink

      Sure, send me an e-mail (manos AT malihu DOT gr)

      Reply
  21. Jens Peermann
    Posted on February 16, 2011 at 00:32 Permalink

    How do I adjust for the difference in mousewheel scroll speed between Safari and Firefox? The script is set to “delta*1” for vertical, which is ok in Firefox, but way too fast in Safari. I have to bring it down to “delta*0.001” to get a reasonable speed in Safari. That, of course, brings it to less that a snail’s pace in Firefox.

    Reply
    • malihu
      Posted on February 16, 2011 at 14:28 Permalink

      Assuming you wanna modify it on Safari on mac OS, you can modify a bit the script as follows:

      Inside jquery.mCustomScrollbar.js find CustomScroller(); (line 38). Right above this line add:
      //check for safari browser on mac os to lower mousewheel delta var os=navigator.userAgent; if (os.indexOf("Mac")!=-1 && os.indexOf("Safari")!=-1 && os.indexOf("AppleWebKit")!=-1 && os.indexOf("Chrome")==-1){ var mousewheelDelta=1; } else { var mousewheelDelta=10; }

      Next, find var vel = Math.abs(delta*10); (lines 112 and 252) and replace them with: var vel = Math.abs(delta*mousewheelDelta);

      That should do the trick 😉 Let me know if that helped.

      Reply
      • Naresh
        Posted on December 18, 2014 at 14:04 Permalink

        i am not using jquery.mCustomScrollbar.js
        am using ; jquery.mCustomScrollbar.concat.min.js;

        scroller was moving verry slow please update me am using examples/complete_examples.html

        Reply
  22. Carla
    Posted on February 14, 2011 at 01:41 Permalink

    Hi malihu,

    love this tutorial, but is there a way I can use it to make a fullpage scrollbar? I mean, to replace the default browser one…

    Thanks!!

    Reply
  23. Nikola
    Posted on February 10, 2011 at 18:01 Permalink

    Thanks for the great work and for the feedback you provide.

    I have a question on this part:

    ———————————————
    Hiding content scrollers
    If you want to have the scroller initially hidden, you need to hide it after calling the mCustomScrollbar function. This is important, in order for the script to calculate content width or height correctly.
    ———————————————

    May I ask you or the other users here to explain, please, how to “have the scroller initially hidden”. That is something I can not figure out by myself. Thanks again.

    Reply
    • malihu
      Posted on February 17, 2011 at 15:30 Permalink

      Hi Nikola,
      An example could be:
      $(window).load(function() { $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10); $("#mcs_container").hide(); });

      Reply
  24. Jens Peermann
    Posted on February 10, 2011 at 17:20 Permalink

    I love the freedom this code gives for designing the appearance of the scrollbars and would like to use it a lot on future project. There is one problem, though.

    It doesn’t work well with dynamic content from an xml file, imported via spry data sets. The content is displayed, the scrollbar and up/down buttons are displayed, but there is no action.

    http://www.peermann.com/CCAI/artists/artists.html
    http://www.peermann.com/CCAI/Scripts/bioScroll.css
    http://www.peermann.com/CCAI/Scripts/bioScroll.js

    It’s the artist’s bio below the slideshow. The scrollable menu to the left works because its height is a fixed value in the talentContent rule (I had to change names so the two scripts don’t get into each other’s way). But the cintent is dynamic – spry repeat – and functions without problems.

    The bioContent div appears to get the hight information from the dynamic content – or else it wouldn’t display the scrollbar and buttons – but doesn’t want to function without a fixed value in the css rule.

    Reply
    • Jens Peermann
      Posted on February 11, 2011 at 03:31 Permalink

      The problem may be the Observer I placed into the code.

      With the observer active, the scrollbar and arrows are displayed but not functioning, indicating the height information for the dynamic content is conveyed.

      With the Observer commented out, the scrollbar and arrows are not displayed.

      With the height information added to the content’s css rule, the scrollbar and arrow display and function.

      With the height information added to the content’s css rule and the Observer active, the scrollbar and arrows display but don’t function.

      My conclusion is, there is something in the Obsever’s code that doesn’t play nice with the scroll.js, or vice versa.

      Reply
  25. Jeff
    Posted on February 8, 2011 at 19:39 Permalink

    Hi, love the plug in! It’s exactly what I was looking for, but I have a problem maybe you can help with. I have it running successfully on a few pages that are in the root directory of my site, but on one page in a subdirectory, it won’t load. I’ve changed the links to the .js files and the .css files correctly, but I still get nothing. in both instances, the div is being loaded with dynamic content, and that works well. My site is not yet live so I’d like to send you an email with the link, if you could find a few minutes to look at it and advise?

    I can tell you that Safari is giving me this error:
    TypeError: Result of expression ‘$dragger.draggable’ [undefined] is not a function. jquery.mCustomScrollbar.js:221

    but I know nothing of javascript, so I’m in your hands.

    Thanks!

    Reply
    • malihu
      Posted on February 12, 2011 at 18:11 Permalink

      Hi Jeff,
      Please send me an e-mail with the link and see if I can help

      Reply
      • Jeff
        Posted on February 22, 2011 at 20:14 Permalink

        Hi Malihu,
        Have you had an opportunity to examine the site I’m having trouble with? It’s live now, so I’ll post the url here: http://ticorestaurant.com/gallery

        You’ll see I’m using PowerGallery by WebAssist, and something is not working. The css is working, but the scrolling isn’t. Any help is appreciated.

        Reply
      • Jeff
        Posted on March 30, 2011 at 22:55 Permalink

        I haven’t been able to work out the issue I’m having with the scrollbars. I know you’re busy, but would appreciate any help you can offer. The page: http://ticorestaurant.com/gallery

        You can post here or email me directly. Thanks!!

        Reply
  26. Jim
    Posted on February 5, 2011 at 16:42 Permalink

    very sweetttttt… thanks for posting this! 🙂

    Reply
    • Simon
      Posted on February 8, 2011 at 18:17 Permalink

      I am having trouble with the “noConflict”.
      On my own website there are several jQuery scripts – and it works.
      On an other site there are also several scripts but it doesn’t work, so I like to use a var like this:

      var $jScroller = jQuery.noConflict();

      But everytime I try to implement it to your Script it goes like “Not with me fucker.” Where and how do I do that?

      Reply
  27. Marc
    Posted on February 3, 2011 at 17:16 Permalink

    Hi there! I tried your plugin and it works just great in all common pc or mac browsers. Great job! But on iOS devices (iPad or iPhone) there is no way to scroll the content.
    Do you have any idea how to create a workaround?

    Cheers!

    Reply
    • malihu
      Posted on February 3, 2011 at 17:31 Permalink

      Hello Marc and thanks for your comments,

      Unfortunately iOS is very limited on jquery events. Actually, the only event that actually works on iOS is click. This plugins utilizes events like drag, mousedown, mouseup etc. which are what every scrollbar needs.

      A simple solution would be to add a condition to check for iOS and apply a normal scrollbar (e.g. css overflow:auto) for it.

      Reply
      • GG
        Posted on October 30, 2011 at 03:13 Permalink

        Malihu – thanks for this plugin man I really like it.. just wish it worked with iPad..

        So after some research I see a whole bunch of scrollers for ipad but none that have buttons.. just a draggable scroll like you mentioned overflow: auto.. although they are custom…

        Take a look – I think you can check this out to figure out how to make it work with iPad/Iphoen

        http://cubiq.org/iscroll
        http://cubiq.org/dropbox/iscroll4/examples/simple/

        Thanks !

        Reply
  28. SamSoul
    Posted on February 3, 2011 at 14:59 Permalink

    Hello.
    First of all thank you for your scroll. It works very well for me (for now …)
    A quick question: how to go top or bottom of the page thanks to the side arrows rather than to scroll the text when you click on it. This feature would be very helpful and my lack of knowledge does not allow me to adapt your code to my needs.
    Is this feasible?
    Do you plan to implement this type of function?
    Can you give me some hints?
    In any case thank you for your work and sharing your knowledge.
    In advance thank you for your reply

    Reply
    • malihu
      Posted on February 8, 2011 at 14:29 Permalink

      In jquery.mCustomScrollbar.js find function BtnsScroll(dir) and BtnsScrollX(dir) functions. Inside them set both var scrollSpeed variables to 20, so you can instantly scroll to top and bottom accordingly. I haven’t actually checked it, but it should do the trick.

      Reply
  29. Jay
    Posted on February 3, 2011 at 01:45 Permalink

    Do you have a script to scroll the box down X pixels any time i push the down arrow key? and alternatively scroll up when i push up arrow key? thx

    Reply
    • Jay
      Posted on February 4, 2011 at 22:55 Permalink

      i got it to work with this script:

      $(document).keydown(function(e){

      if (e.keyCode == 38) {
      $(“.scrollUpBtn”).mousedown();
      setTimeout(“$(‘.scrollUpBtn’).mouseup()”,250);
      }

      if (e.keyCode == 40) {
      $(“.scrollDownBtn”).mousedown();
      setTimeout(“$(‘.scrollDownBtn’).mouseup()”,250);
      }

      });

      Reply
      • malihu
        Posted on February 5, 2011 at 03:37 Permalink

        Great! I’ll check it further. Thanks for posting it Jay 🙂

        Reply
      • Carlos
        Posted on September 13, 2011 at 19:11 Permalink

        Hello!, Sorry as you manage the installation of this function?, I do not work: (

        Reply
  30. Jay
    Posted on February 3, 2011 at 01:13 Permalink

    Hey, I tested your demo page with my ipad running ios 3.2.1 and the scrollbars don’t seem to respond in safari. Have you tested the script for ipad? If so, what ios version?

    Thanks, great script; you have some gems in your other site posts too 😉

    Reply

Comments pages: 1 2 3 4 5 84

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php