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

Post a comment

Comments pages: 1 2 3 4 84

  1. lobinski
    Posted on January 31, 2011 at 21:10 Permalink

    Hi malihu,
    thanx for that great content-scroller. its really nice with its easing.
    I’m new to jQuery, and sure I made a mistake:-( but after searching for some hours for it,
    I try to ask you, what’s wrong with my test?
    http://kunden.graphics4web.de/stindt/test/
    everything is working nice, but the dragger is much to long, nearly same size like the dragger_container. in css it should have 60px height. But it looks like 400. I can’t find my mistake? maybe, somebody gives me a hint. would be nice.
    thanx:-)
    lobinski

    Reply
    • malihu
      Posted on February 1, 2011 at 03:02 Permalink

      Hi,
      I think the long dragger in your code is normal, cause your content is not very long and you’ve set the scrollbar height/width adjustment to “auto”. If you want the dragger to have a fixed size (the one you set within the css), change the parameter to “fixed” πŸ˜‰

      Reply
      • lobinski
        Posted on February 1, 2011 at 09:53 Permalink

        cool, yes it works:-) thank you very much.

        Reply
  2. Me
    Posted on January 27, 2011 at 14:43 Permalink

    Cool Control, but just one question: Is it possible to have some links outside the scroller control which links to the scroller? I have a large text with 8 chapters. I’d like to put links to the chapters above the scroller so that the scroller moves to the clicked chapter. Would this be possible? Is there any demo? Many thanks!

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

      Not possible at the moment. A feature like this would require additional coding especially to integrate with many scrollers. I might give it a try in the future. Thanks for suggesting it πŸ™‚

      Reply
      • Raf
        Posted on November 23, 2014 at 20:11 Permalink

        Perhaps I’ve overlooked it, is this possible yet?

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

          Yes. You’ll need to use plugin’s scrollTo method to scroll to any position inside the element with the scrollbar. See Methods: scrollTo for more info.

          Reply
  3. Martin Andersen
    Posted on January 27, 2011 at 02:25 Permalink

    Is it possible to have vertical as well as horizontal scrollbars at the same time?

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

      Not at the moment. I don’t really know how easy it’d be to implement it. I’ll check it and let you know if it’s relatively easy to do.

      Reply
      • daniel
        Posted on August 28, 2012 at 08:26 Permalink

        Hi,
        Love your script!
        Would also be intrested in implementing both hor and vert scroll.
        Just wondering if this is something i thinking about implementing?

        Reply
        • malihu
          Posted on August 28, 2012 at 15:28 Permalink

          I might give it a go but I can’t say when.

          It’s a bit tricky to implement and it’ll probably sky-rocket plugin size. It’s not very high on the to-do list to be honest since very few people actually need custom scrollbars for both axis.

          Reply
  4. Timothy Long
    Posted on January 26, 2011 at 06:57 Permalink

    Yes! That pixel limit workaround is perfect for now. Thanks for taking the time.

    Reply
  5. Mauha
    Posted on January 24, 2011 at 23:59 Permalink

    Hi,

    Very nice plugin !

    I am trying it on a page divided in three columns, where the left division contains thumbnails who target named anchors on the center division, the division I use your custom scroller on.

    The scroller works fine, but when I call a part of the center division by a link on the left one, the scrollbar dragger doesn’t follow.
    Would it be possible to position the dragger initially according to the position of the displayed part the center column ?

    Thanks.

    Reply
  6. isHristov
    Posted on January 23, 2011 at 23:47 Permalink

    Malihu, I promised to show you the project where I implemented this but there is still not enough content for the scroller to be triggered at the page. πŸ™‚ But no worries – I’ll fulfil what I’ve said at the moment it become possible. πŸ™‚

    It looks like you’ve done pretty good job as far as I can tell by the number of comments and the buzz around. πŸ™‚ And the plugin can do wonders. πŸ™‚ Congratulations!

    Thanks for your credit in the post. :_)

    However, I was trying to implement it in a new project where the content in div.content is dynamically changed through jQuery.load. The problem is that when the new content is loaded the div.dragger dimensions are not calculated for the new content and some bad things happen (a lot of empty space may occur at the bottom of the div.content if the loaded document is smaller or what’s even worse – you may not even get to the content at the bottom if the new content is bigger than the firstly loaded).

    I thought you should have it in mind. I’ll try to find a solution but my head is a mess right now. Please let me know if you have an answer for this.

    Thanks and cheers! πŸ™‚

    Reply
    • isHristov
      Posted on January 24, 2011 at 23:34 Permalink

      I have a temporary fix for this so I’m gonna share it in case someone else wants to load content dynamically.

      The concept is to call the function CustomScroller() anytime we load new content into the div.content. To do this first we have to make this function “global” so we can call it from anywhere within our script (and outside from $.fn.mCustomScrollbar = function).

      First we change the way we declare this function:
      function CustomScroller(){
      to
      $.fn.mCustomScrollbar.CustomScroller = function CustomScroller(){ – we make it “global” this way

      The call to this function (CustomScroller();) is currently placed before its declaration (it’s pretty much at the beginning of the script). But now when the function is global this calling won’t work so we have to move CustomScroller(); from the top to the bottom (almost) – the exact place is just before the line $(window).resize(function() {

      Now, because we changed the way we declare this function we must change the way we call it:
      Change CustomScroller(); to $.fn.mCustomScrollbar.CustomScroller(); . There are 2 places in the script where we should change it – the first is the one we’ve just move from top to bottom and the second is placed within $(window).resize(function() { – it is also closed to the bottom.

      Next we remove
      if(mouseWheelSupport=="yes"){ $customScrollBox.unbind("mousewheel"); }
      and add $customScrollBox.unbind(“mousewheel”); after if(mouseWheelSupport==”yes”){ – there are 2 occurrences.
      This way we make sure we don’t bind more than once “mousewheel” event.

      If we are using horizontal scrolling, we add
      $customScrollBox_container. stop().animate({left: 0}, 300, "easeOutCirc"); $dragger. stop().animate({left: 0}, 300,"easeOutCirc");
      after
      //horizontal scrolling ------------------------------ if(scrollType=="horizontal"){
      or if we use vertical scrolling then add
      $customScrollBox_container. stop().animate({top: 0}, 300, "easeOutCirc"); $dragger. stop().animate({top: 0}, 300,"easeOutCirc");
      after
      //vertical scrolling ------------------------------ } else {

      Now everything is put in place and when we load some dynamically new content into the div.content we should call the global function after the loading is complete. If we use load, we should do this:
      $("div.content").load("new.html", function(){
      $.fn.mCustomScrollbar.CustomScroller();
      });

      The last code could be different depending the way you load new content, but all of the above is necessary. There is one problem though - the size of the dragger (the part you move) is not precalculated when the new content comes.

      That's it for now and I would love to see some comment (yeah, even negative). :-)

      Reply
      • tavo
        Posted on January 26, 2011 at 21:31 Permalink

        hey man, im terribly happy you noticed this (if you are in fact talking bout the issue i think you are) you see, my div resizes dynamically with a filter button (which filters the content of it) and ive had the issue once of a custom scrollbar not resizing..

        now, i dont think it was malihu’s one, and i havent even implemented it yet, im still working on the site; but eventho my java knowledge is quite.. short, i think this may occur, as i havent seen some kind of relative instruction on the code.

        anyway, the reason im posting is that.. i didnt get what you said. hahah
        as i said my java knowledge is almost unexistant and i have no idea where or how to place the codes you provided..

        would you happen to have online the files youre working at so i could give em source a quick look and see where do i have to place em?

        thanks a lot, greets

        Reply
      • isHristov
        Posted on January 27, 2011 at 11:38 Permalink

        It would be pretty hard to understand it if you haven’t seen maluhi’s files and instructions already…
        Read the instructions, download the plugin, open the files and inspect them and then read my comment again – I’m sure this way you’ll get it.

        And if you don’t – I’ve uploaded the .js plugin file here (it won’t be there forever) – I’ve put “here” at any place where I’ve made some change – just search within the file.
        With this .js you should be able to refresh (no everything) the slider by calling $.fn.mCustomScrollbar.CustomScroller(); when you need it.

        Reply
      • isHristov
        Posted on January 27, 2011 at 11:40 Permalink

        Sorry for this post but my link kind’a disappeared. πŸ˜‰
        Here it is (the js. plugin file) – http://webpresence.bg/uploads/dev/jquery.mCustomScrollbar.js

        Reply
      • dmayo2
        Posted on July 22, 2011 at 23:31 Permalink

        IsHristov
        ROCK ON. You solved the “scrollTo” problem while at the same time fixing for dynamic content.

        Reply
    • malihu
      Posted on January 29, 2011 at 16:17 Permalink

      Hello again isHristov πŸ™‚

      Thanks a lot for posting the fix! I’m currently modifying the script to accept images with different widths on the horizontal scroller. By the time it’s ready, I’ll check and implement your code in the plugin. Gonna do some testing to check if it works with multiple scrollers, browser resize, scrollbar auto height etc.

      I’ll post an update soon.

      Edit: done!

      Reply
      • isHristov
        Posted on January 31, 2011 at 19:24 Permalink

        Yeap, that’s definitely better. πŸ™‚ Now the dragger resizes when/if the new content loads.

        But you should consider removing
        && $customScrollBox_container.width()!=$customScrollBox.data("contentWidth")
        and
        && $customScrollBox_container.height()!=$customScrollBox.data("contentHeight")
        from lines 45 and 185 within jquery.mCustomScrollbar.js. With this check you prevent the container to move to the left/top 0 if the new loaded content have the same width/height (and that’s a very possible scenario).

        Greets!

        Reply
      • malihu
        Posted on February 1, 2011 at 03:10 Permalink

        @isHristov Yes, I’ve set this condition to prevent other scrollers in the same page from reseting. I’ll check it further to see if I could implement another condition besides size.

        Reply
      • isHristov
        Posted on February 2, 2011 at 01:16 Permalink

        I’m not absolutely sure (haven’t test it), but I think that when we call
        $("#mcs_container1").find("div.content").load("new.html", function(){ $("#mcs_container1").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10); });
        only the scroller for #mcs_container1 would be “refreshed” and the rest of the them would remain unchanged. Am I wrong ?

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

        Yes you’re right, only the scroller for #mcs_container1 would refresh.

        Reply
  7. Nige
    Posted on January 21, 2011 at 17:04 Permalink

    Hi Malihu,

    Thanks for getting back to me so quickly! This project isn’t live yet, but I have uploaded to a folder on the company site.

    http://www.mememedia.co.uk/kirman/themes/fullscreen/Untitled-2.html

    If you click on the little green tag in the middle of left hand side of the browser window a text box slides out, this is the contailer that needs to be scrollable.

    Any ideas would be appreciated!

    Reply
    • malihu
      Posted on January 21, 2011 at 17:21 Permalink

      The scrollbar doesn’t show because you start the text-box hidden. You need to hide the box after calling the mCustomScrollbar function (still inside the window load).

      Reply
      • Nige
        Posted on January 21, 2011 at 17:29 Permalink

        Hi Malihu, Have I understood you correctly? It hasn’t worked!

        Reply
      • Nige
        Posted on January 21, 2011 at 17:59 Permalink

        Hi,
        Sorted! I’ve moved the $(‘.portfolioInfo’).hide(); $(‘.text’).hide(); after my click function and the scroll bars seem to fade in with the text now!
        Thanks alot for your help. The scroll bars look cool.
        Thanks

        Reply
  8. Nige
    Posted on January 21, 2011 at 15:45 Permalink

    Hi,
    Scrollbar is really cool, but for some reason, it only appears when I resize my browser window! Any idea what I may have done to cause this and how I can get round it!
    Your help would very much appreciated.

    Reply
    • malihu
      Posted on January 21, 2011 at 16:09 Permalink

      Hello Nige,

      Is your content long enough to require a scrollbar? When your container height is set in percentage, when you resize the window, it re-calculates content height and apply a scrollbar if needed. If this isn’t the case, I’d need to see your link and code.

      Reply
  9. chris
    Posted on January 20, 2011 at 01:31 Permalink

    hey malihu!

    this scroller is really cool. but i found a bug which i couldn’t get over…

    i was trying to use the horizontal scroller for pictures. and if you have a lot of pictures and you have to set the width of the mcs5_container .customScrollBox .container on something arround more then 12000px the scroller starts to go crazy on a certain position. it’s beginning continiously from the first picture and moving super fast…

    any clue what to do?

    thanks a lot!
    chris

    Reply
    • malihu
      Posted on January 25, 2011 at 17:17 Permalink

      Hello chris,

      This happens due to a jquery bug that limits animate values to 9999 pixels. Check the solution provided at the end of the post πŸ˜‰

      Reply
  10. Volkan
    Posted on January 18, 2011 at 12:54 Permalink

    Hello there!

    This is really nice work! Congratulations and thank you for sharing this with us. I’m just wondering if i can use any ScrollTo method ?

    I’ve read all comments and two friend talked about this in their comments. Any progress about this situation ?

    Thank again..

    Reply
  11. Adrian
    Posted on January 17, 2011 at 11:58 Permalink

    Hi again,

    I’m getting this error, and I don’t know what seems to cause it. The scroller works, but I get the error
    $dragger.position() is null
    if($dragger.position().top>$dragger_container.height()-$dragger.height()){
    jquery…lbar.js (line 307)

    What could be the cause?

    Thanks,
    Adrian

    Reply
    • malihu
      Posted on January 17, 2011 at 12:05 Permalink

      Does this happen on a particular browser? Can you provide a link?

      Reply
    • Adrian
      Posted on January 17, 2011 at 12:26 Permalink

      Correction. The scroller doesn’t work. I have several scrollers on two pages and I thought that the error was from the scroller that works (the horizontal one). But it’s from the vertical scroller from another page. The dragger is moving on dragging, but the content doesn’t. Any idea, malihu?

      Thanks again.

      Reply
      • Adrian
        Posted on January 17, 2011 at 12:27 Permalink

        I’ll upload the files and provide you the link in a bit.

        Reply
      • Adrian
        Posted on January 17, 2011 at 12:30 Permalink
      • malihu
        Posted on January 18, 2011 at 00:17 Permalink

        The only thing I see is that “contact-list” and “people-invited” divs do not have a unique id. You have the same class name on the following dl tags. Try to give the dl another class name and see if it works.

        Reply
      • Adrian
        Posted on January 18, 2011 at 10:50 Permalink

        IDs are unique. One is “contact-list” and the other one “people-invited”. What do you mean by unique, in this case? Both have same two classes, but I don’t think that’s the problem. I also removed the classes from DL’s, still no effect.

        Reply
      • malihu
        Posted on January 18, 2011 at 13:48 Permalink

        Adrian,

        Just checked the functions.js script and figured what the problem is. On vertical scrollers, the minimum extra bottom scrolling space parameter must be 1 (you’ve set it to 0).

        Actually, it’s entirely my fault as I haven’t documented or comment it in the code and post. I’ll modify the script to convert 0 to 1 done. In the meanwhile, just set the extra bottom scrolling space parameter in your vertical scrollers to 1 instead of 0.

        Reply
      • Adrian
        Posted on January 18, 2011 at 14:45 Permalink

        Phew! Great! It works now! Thanks, malihu! πŸ™‚

        Reply
      • Adrian
        Posted on January 18, 2011 at 15:22 Permalink

        But I still get that annoying error πŸ™
        $dragger.position() is null
        if($dragger.position().top>$dragger_container.height()-$dragger.height()){
        jquery…lbar.js (line 307)

        Reply
      • Adrian
        Posted on January 18, 2011 at 16:57 Permalink

        Ok, I now know where’s the error from. It’s triggered on window.resize() when I open and close my firebug in Firefox. Any ideas on that, malihu? Thanks again for your time and help.

        Reply
    • Adrian
      Posted on January 18, 2011 at 17:00 Permalink

      In fact, it’s triggered on any window resize, not just when firebug is being opened or closed. Sorry for spam πŸ™

      Reply
  12. Leslie
    Posted on January 16, 2011 at 19:16 Permalink

    Hi, I have the same problem when i tried to hide it initially.
    I’m using display: none to hide the “mcs3_container”. And using jquery tooggle to unhide. But the custom scroll bar will not appear after that.

    Able to help?

    Reply
    • malihu
      Posted on January 17, 2011 at 12:16 Permalink

      Hi, check the above comment to see why this happens. You probably need to hide it after calling the mCustomScrollbar function (still inside the window load)

      Reply
      • Max
        Posted on March 15, 2012 at 17:37 Permalink

        Hi, I have the same problem, but I need to start my page with the container invisible! So, if I hide it AFTER calling the mCustomScrollbar function, I see that content for one second.

        Is there some tips to hide something without “display:none”?

        Reply
        • billy
          Posted on July 19, 2012 at 09:30 Permalink

          I have the same problem, Max did you find a solution by any chance?

          Thanks!

          Reply
          • Anakin
            Posted on August 1, 2012 at 21:11 Permalink

            I also have the same problem. I have a facebook like bar with some menus that should only be shown when the user clicks on the respective icon, but then the scroll isn’t applied πŸ™

            There is any solution for this problem already?

            Thanks!

        • malihu
          Posted on August 1, 2012 at 22:38 Permalink
          • Anakin
            Posted on August 2, 2012 at 02:51 Permalink

            Your solution works, but I have a problem with it :s My container just has a max-height defined, I can’t define a fixed height for it and this solution only works if I define a fixed height for the container. Isn’t there any solution for this?

            Thank you very much!

          • malihu
            Posted on August 2, 2012 at 03:31 Permalink

            @Anakin

            Not really. Custom scrollbars just like plain html scrollbars require a height value for the container.

            Maybe you could apply the scrollbar to a parent div with fixed height (your current max-height value) that’ll wrap your auto-height container.

          • Anakin
            Posted on August 2, 2012 at 15:41 Permalink

            My parent div also as a max-height.

            Anyway I was able to solve the problem. Before updating the scrollbar I get my container current height and then I set it as a css rule. Each time this container is displayed I reset that css rule and then I set it again. This way the scrollbar works and my container height can grow πŸ™‚

            Maybe it isn’t a very nice solution, but for now it’s working.

  13. Jay
    Posted on January 14, 2011 at 08:24 Permalink

    great script. it works, however if i try to .hide() the container, and then .show() it again, the scrollbar won’t appear but the container does. weird bug. any ideas?

    Reply
    • malihu
      Posted on January 14, 2011 at 10:01 Permalink

      Are you hiding the whole content (e.g. $(“#mcs_container”).hide()) or just the container div ($(“#mcs_container .container”).hide())?

      I’ve made a test of hiding and showing both and it works fine so I’d have to check your code to see if I can help.

      Reply
      • Jay
        Posted on January 14, 2011 at 21:26 Permalink

        Ok i set up the files here:

        http://pennypoints.com/test1.html
        http://pennypoints.com/test.html <-click on home text to show box

        the only difference between is in test1.html i commented out: $('.box').hide();
        line 57.

        if i hide the box, and then show, the scrollbar disappears. I must be doing something stupid, as usual πŸ™

        Reply
      • malihu
        Posted on January 15, 2011 at 13:57 Permalink

        Jay,

        The dragger is kept hidden because the plugin checks if the content is long enough to apply a scrollbar (if content is shorter than its container, the dragger is hidden).

        By hiding the content box before calling the mCustomScrollbar function, the calculation of content height becomes null, thus the dragger remains hidden.

        To resolve the issue, move $(‘.box’).hide(); and $(‘.tab’).click functions below mCustomScrollbar function call (still inside window load).

        This should solve the issue πŸ˜‰

        Reply
      • Jay
        Posted on January 25, 2011 at 06:56 Permalink

        thanks πŸ˜‰

        Reply
  14. Timothy Long
    Posted on January 14, 2011 at 00:27 Permalink

    Fantastic plugin. I needed something to supplement my old flash slider and this was just what I had in mind. However, it does get a little wonky for me when I use a large width on the scrollbox container. Any ideas?

    http://www.iamtimothylong.com/testing/port

    If you scroll through the first slider, you’ll notice it begins to skip and repeat about halfway through. I’m sure it’s an error in my end, but if you could shed some light I’d appreciate it! Thanks!

    Reply
    • malihu
      Posted on January 14, 2011 at 09:42 Permalink

      Hi Timothy,
      From what I’ve seen, it seems that some of your image links are broken (e.g. images/photo/selected/DSC_0224.jpg). In addition, you need to make sure you’ve calculated correctly the total width of the container div (in the css file), especially when your elements have various widths.

      Reply
    • malihu
      Posted on January 25, 2011 at 17:40 Permalink

      Hi again Timothy!
      I have updated the post with a solution to your issue.
      The problem you describe happens due to a jquery bug that limits animate values to 9999 pixels. Check the solution provided at the end of the post.

      Reply
  15. Adrian
    Posted on January 13, 2011 at 15:02 Permalink

    Hi malihu,

    First of all, congrats for the scroller. I had the same issue with horizontal scrolling, and had to calculate the width of the container and apply it before calling the scroller script. Someone asked why didn’t you appended the mark-up. Well, in that case, the width had to be applied somehow after the scroller was initialized and it would’ve been a little harder.

    Anyway, is it possible to make the script behave like the one here: http://www.lebensraum-eilenriede.de/ – I mean, the content and the dragger to “snap to grid” ?

    Thak you,
    Adrian

    Reply
    • Adrian
      Posted on January 13, 2011 at 15:05 Permalink

      Oh, and one more thing. When I click on the dragger, it moves along with the content. Could that be avoided somehow? Thanks

      Reply
      • malihu
        Posted on January 14, 2011 at 10:35 Permalink

        You’re right Adrian. I’ve updated jquery.mCustomScrollbar.js so it doesn’t scroll the content when you click on the dragger. Please re-download the .zip archive to get the updated version πŸ˜‰

        Thanks for the suggestion!

        Reply
        • webmolot
          Posted on July 23, 2012 at 15:25 Permalink

          Really well, thank you.
          But I have a small problem in order that the pictures too quickly twitch when snap scroll. How to make it slower?

          Reply
      • Adrian
        Posted on January 14, 2011 at 11:07 Permalink

        Great, thanks for that. How about that functionality like “step” from jQuery UI slider? Any ideas? :-S

        Reply
    • malihu
      Posted on January 14, 2011 at 13:06 Permalink

      The scrollbar script at http://www.lebensraum-eilenriede.de/ is completely customized to work with their specific images dimensions. It’s not possible to implement it on a plugin that must work on any given content type (images, texts etc.) and/or length. It’s an entirely different script to develop.

      Reply
      • Adrian
        Posted on January 14, 2011 at 17:28 Permalink

        Ok, got it. Thank you

        Reply
  16. Daniele
    Posted on January 12, 2011 at 17:56 Permalink

    Really an excellent work. Great!

    But I’m wondering why you have decided not to auto-append all extra nedeed markup to the selected DIV in real-time, instead of forcing the user to do that.
    This could make the (user) code cleaner and the usage much easier and less error-prone.

    Reply
    • malihu
      Posted on January 13, 2011 at 02:23 Permalink

      Hello Daniele,

      A fair question πŸ™‚

      I try to keep html markup separate from (in this case javascript) functionality. I like to have the document structure and content intact as -among others- it greatly helps maintenance, updates etc. I always seemed to work that way (I do the same with flash actionscript) and I didn’t know until recently, that there’s a definition for it: “Unobtrusive JavaScript”.

      The thing is that I mostly post stuff for developers and web authors/designers, so most of the times I deliver a script as I would like to get it if I was looking for something.

      I do agree that if I’d publish something for a broader audience (for example an html5/flash video player), I would probably create it the way you describe.

      Thanks for your comments πŸ™‚

      Reply
      • Dan
        Posted on June 30, 2011 at 23:59 Permalink

        Malihu,

        This response really frustrates me. I passed up on your plugin when I first began my quest to satisfy my designer’s requirements for this very reason–that you require me to either hand-code a bunch of boilerplate markup, hack your plugin, or wrap it in a plugin of my own. Now after losing two days’ worth of productivity with several other custom scrollbar implementations, I’m back where I started–right here–and that’s the only reason I’m taking the time to post a comment.

        “Unobtrusive JavaScript” is keeping the JS out of the markup (e.g. not using HTML’s onfoo attributes, not using inlined tags, etc.). But what you have here is a situation where the markup your plugin requires is incredibly intrusive because a) it requires the developer to either memorize the structure or repeatedly consult the documentation to see how it’s supposed to be laid out, and b) it introduces a metric butt-load of non-semantic markup that serves a purpose only if JavaScript is enabled. So practically speaking, this misapplication of the concept of “unobtrusive JavaScript” completely backfires and makes people shy away from using your otherwise excellent-looking plugin.

        In general, anytime a plugin requires a particular structure (especially one as deeply nested as what the present plugin requires), that structure should be dynamically generated by the code. That’s just plain good programming–it’s less error prone, it’s easier to create markup, it makes it easier for developers to swap out implementations (yours is the only plugin I’ve seen in this genre that requires so much extra hand-added markup), and it keeps the markup free from distractions that have nothing to do with the structure of the document itself. In short–it’s “compassionate programming.” This is why web development frameworks like Rails are so wildly popular–they let you focus on the task at hand without getting bogged down with the burdens of creating reams of boilerplate code.

        If you were to lift the burden of the hand-creation of all this boilerplate from the user, your plugin would be as attractive to use as the demo page it powers.

        Reply
      • malihu
        Posted on July 1, 2011 at 02:07 Permalink

        @Dan
        Thanks a lot for your valuable input and for taking the time to post your thoughts.

        I am aware that I could completely “skip” some of the divs required for this plugin or just create them with js. Believe it or not, I’m like constantly working and I can’t get the time I need to update this plugin, something I wanna do for like several months now πŸ™

        I’m constantly learning new stuff on coding, designing etc. and there’s always a new-better way of doing things. I will definitely try to find some time to implement them on this custom scrollbar plugin.

        I’m really sorry for any frustration I caused.
        Seems that when I first create a fairly complicated plugin such as this, there are times I get focused in taking into consideration all the possible scenarios (vertical-horizontal scroll, images-no images, various images widths/heights, arrow buttons, liquid dimensions,window resize, dynamically loaded content, performance etc.), resulting in running out of time polishing or giving some extra thought on some implementation details.

        Please keep in mind that I don’t come from a purely programming background. I was a designer for many years and started scripting in Flash which although is very similar to javascript, it is completely different from DOM scripting, so please bare with the errors I make.

        The only objection I have is your point b about markup that serves a purpose only if JavaScript is enabled.

        Right or wrong, when creating plugins, scripts, websites etc. I don’t really care, support or even consider anything that has javascript disabled (or is as old as IE6). I simply like to focus and spend time on more important things like adding features, better design etc. than supporting js disabled browsers πŸ™‚

        Thanks again for your comments. I’ll post an update when I modify the plugin.

        Reply
  17. braluhr
    Posted on January 12, 2011 at 04:55 Permalink

    Great plugin, malihu!

    Back in September Vadim asked about a method for scrollTo or basically an initial auto-scroll when page loads.

    I’ve tried a few things to try and cause this to happen, but can’t seem to crack it. I have it on a template page that I want for all pages within a section. But for each individual page, I want to scroll to see the item being viewed at time of $(document).ready() which would appear as a separate call when the content page is loaded.

    Any advice?

    Thanks! Loving the plugin!

    Reply
  18. Gitanjali
    Posted on January 11, 2011 at 15:35 Permalink

    Thank you!

    Thanks a lot

    Reply
  19. Gitanjali
    Posted on January 11, 2011 at 13:06 Permalink

    Hi,

    You have done excellent job.
    One question how did you use custom font in your site.(you have used it in “jquery_custom_scroller ” demo folder too which is downloadable).

    Thank you.

    Really good work.

    Reply
  20. Nick
    Posted on January 10, 2011 at 00:35 Permalink

    Hi Malihu,

    First off, great stuff.

    My question is pretty much the same as Shaun from Jan. 4th ( http://manos.malihu.gr/jquery-custom-content-scroller#comment-3922 ). I’ve customised my horizontal scroller, styled it just right, everything’s working a treat, except the width is defined in the CSS. And as Shaun will be, I’ll also need it to be dynamic.

    So, no complaints here, just a request for help.

    Thanks again for the effort of making a great piece of code available.

    Keep up the great work,

    nick

    Reply
    • malihu
      Posted on January 10, 2011 at 01:47 Permalink

      Hello Nick and thanks for your comments.

      Shaun used the thumbnail scroller (http://manos.malihu.gr/jquery-thumbnail-scroller) which I’ve updated to expand the thumbnails container dynamically.

      I could modify a bit this script to do the same (especially if your thumbnails have a fixed width) and send it to you. Is this ok?

      Reply
      • Nick
        Posted on January 12, 2011 at 00:33 Permalink

        Hi again Malihu,

        Thanks a lot for your speedy reply, but a developer friend and I put our heads together and wrote some code that calculated the total width of all the images (plus padding), and then gave the div style that width. So, alls good here. Thanks.

        I had a jQuery preloader to run while the images loaded, but once the preloader was finished and removed itself, your scroll was inactive. Have you heard that any of your other ‘fans’ that have had this problem?

        Thanks again for your help and generosity.

        Reply
      • malihu
        Posted on January 13, 2011 at 02:31 Permalink

        Hello again Nick,

        Grats on solving the issue with the div width πŸ™‚ If all thumbs have the same width it’s fairly easy to calculate it and scale the container div. The tricky part is to do it when thumbs have different size. I’ve done it for another script and I might implement it on this scroller when I get some time.

        As for the preloader, try to call the mCustomScrollbar function after the preload of all images is done.

        Reply
  21. soccerff22
    Posted on January 6, 2011 at 17:03 Permalink

    Wow, this plugin looks awesome. Will give it a try.

    Reply
  22. Jay
    Posted on January 6, 2011 at 07:26 Permalink

    Nice Plugin. Thanks for that. I am currently working on a new site and might use this plugin.

    Reply
  23. Colby
    Posted on January 5, 2011 at 11:20 Permalink

    Hi there. Love this! Is there any way for me to add up and down arrows ( v ^ )? Either on the top and bottom of the scroll bar or together in the bottom-right corner?

    Thanks for reading!

    Reply
    • malihu
      Posted on January 7, 2011 at 12:02 Permalink

      Hello Colby,
      I’ve updated the plugin to support scrolling buttons (both vertical and horizontal). Check the demo as I’ve implement it on a couple of scrollers and re-download the archive with the updated files.

      Thanks for your suggestion πŸ™‚

      Reply
  24. Jessica
    Posted on January 5, 2011 at 03:08 Permalink

    Hi there Malihu,

    Love the scroll bar here and I’m trying in vain to use it on a project. I’m relatively new to jQuery, as I’ve been learning as I go.

    My dilemma is that after inputting your code for the scroll bar on the portfolio site I’m building, everything else fell apart. I’ve now got an iFrame not loading the linked content properly on the first click (loading in the bottom right corner), but it will show correctly on a second click on the same link. All the links are in the scrollbar and the pages loading in the iFrame are also loading an awesome carousel script I found. It works perfectly when I test it locally, but as soon as I tested it online I found this problem, across all browsers.

    I don’t know how to fix it and I can’t seem to find anything to help me by searching online. I’m sure it has to be an event handler of some kind, but I’m pretty much stumped. Any help or guidance would be much obliged.

    Reply
    • malihu
      Posted on January 5, 2011 at 03:51 Permalink

      Hello Jessica,
      Please give me link so I can check it and see if I can help.

      Reply
      • Jessica
        Posted on January 7, 2011 at 01:21 Permalink

        Hi again,
        I sent you the link in an email yesterday. I’m trying to not have to post it openly here cuz it’s still on my server at the moment and I don’t want the hits draining my personal site’s speed. Thanks a bunch.

        Reply
      • Skhan
        Posted on January 14, 2011 at 05:14 Permalink

        We too are trying to incorporate this awesome plugin with our iframe but to no success. Malihu, was Jessica’s iframe issue resolved?

        We are using SVG in our application and think this would go a long way to making the application’s presentation more awesome, guidance would be much appreciated.

        Reply
      • malihu
        Posted on January 14, 2011 at 13:52 Permalink

        @Skhan
        Can you send me a link so I can check it?

        Reply
      • Skhan
        Posted on January 16, 2011 at 17:31 Permalink

        Thank you Malihu for the feedback. We have not gone live as yet, our deadline is for 31Jan. Would love to get your feedback when we are ready.

        Coming back to the topic, we are using iFrame and the SVG in it. The scrollbar automatically pops up when the user enlarges the image (using controls provided by us in the interface). The problem appears to be that (unless I have this horribly wrong), in this jquery plugin, the scrollbar is created using a ‘div’ and unfortunately in our case, the scrollbar is created automatically by the browser…

        Would love to hear your thoughts on above and a possible workaround. Will send you a message with our web application link in two weeks.

        Reply
  25. Lionel
    Posted on January 4, 2011 at 10:54 Permalink

    Unusable on Mac with a two-finger touch on the trackpad

    Reply
    • malihu
      Posted on January 25, 2011 at 18:43 Permalink

      I just checked it on a friends macbook (on opera and safari, with inertia scroll enabled) and it works as it should with a two-finger touch on the trackpad.

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

      @Lionel
      Inside jquery.mCustomScrollbar.js find the line var vel = Math.abs(delta*10); and change 10 to a lower number (e.g. 1).
      That should help with mac scrolling.

      Reply
  26. shaun
    Posted on January 4, 2011 at 03:02 Permalink

    fantastic scroller!

    i’ve just set it up with a row of thumbnails, whose horizontal overflow: auto solution was an eyesore against the dark red design (especially the bright blue mac scroller, which i usually love!). i’m wondering though- is there any way to set the .container width to auto-detect its content (rather than set a width in the styles)? when my client adds or removes an image from the set, the total width of the thumbnails will change…

    Reply
    • shaun
      Posted on January 4, 2011 at 04:20 Permalink

      for instance, your thumbnail scroller doesn’t require the width of the container to be defined…

      actually, the more i look at it, the more i think that might be a better solution for my design! πŸ™‚

      Reply
  27. Bes
    Posted on January 2, 2011 at 17:29 Permalink

    Pardon me as I’m a jQuery newbie, but is there a way to make the content scroll automatically along with the scrollbar similar to the “Most Popular on HuffPost” section on http://www.huffingtonpost.com?

    Reply
    • malihu
      Posted on January 3, 2011 at 02:33 Permalink

      An automatic content scroll can be done by animating the dragger with a simple function on page load.

      The huffingtonpost.com “most popular” content is a bit different as it probably loads new content dynamically via ajax and then re-runs the scrollbar function. The same can be done with this scroller.

      What exactly you need?

      Reply
      • Bes
        Posted on January 4, 2011 at 12:39 Permalink

        I don’t need dynamic content to load like Huffington Post, but a similar type of functionality where it scrolls automatically every few seconds but the user can also use a scrollbar to go through as well. Your code has a nice scrollbar design and fuctionality, I’m just wondering if we can easily make it scroll through the list automatically at regular timed intervals.

        Reply
      • Tina
        Posted on October 26, 2011 at 22:49 Permalink

        Hi,
        I’ve used your scroller before and it’s really lovely, but now I’d like it to start scrolling automatically when the page loads. Your reply to Bes seems as close as the discussion gets to this, but unfortunately I don’t know enough jquery to know what you really mean by “animating the dragger with a simple function on page load. ”

        Just for us non-scripters, how do you do that? I have no idea even where to begin with that? I would be soooo grateful if you or someone who understands this better could spell it out for us ignorants πŸ™‚

        Reply
  28. Brett Widmann
    Posted on January 1, 2011 at 03:18 Permalink

    This should work perfectly with what I’m creating. Thanks, it all works great!

    Reply
  29. Eduardo Matos
    Posted on January 1, 2011 at 01:24 Permalink

    Wouldn’t it be better to pass parameters as an object?

    $("element").mCustomScrollbar({ scrollType : 'vertical', easingAmount : 400, easingType : 'easeOutCirc', bottomSpace : 1.05 , heightWidthAdjustment : 'auto', enableMouseWheel : true });

    Reply
    • malihu
      Posted on January 1, 2011 at 02:02 Permalink

      Well, generally yes. Passing parameters as objects is the more error-proof method (not much difference other than that). The only reason I didn’t used it, is because it would clutter the code, especially when you call many scrollers. Thanks for pointing it πŸ™‚

      Reply
  30. php/ajax
    Posted on December 31, 2010 at 03:58 Permalink

    I love this plugin. It’s perfect for both mobile and desktop applications.

    Reply

Comments pages: 1 2 3 4 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