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 4 5 6 7 8 84

  1. Mike
    Posted on August 8, 2011 at 20:57 Permalink

    Love the scroller, works awesome.

    I’m having a slight issue with it loading in ie7. For some reason the scroller appears on the right side and not the left. Any suggestions? Here’s the code I’m using:

    http://www.mstechsolutions.com/tmp/IE7.png
    http://www.mstechsolutions.com/tmp/CORRECT.png

    /* content block 1 */
    #mcs_container{position:relative;}
    #mcs_container .customScrollBox{position:relative; height:100%; overflow:hidden;}
    #mcs_container .customScrollBox .content{clear:both;}

    #mcs_container .customScrollBox{position:relative; height:100%; overflow:hidden;}
    #mcs_container .customScrollBox .container{position:relative; width:320px; top:0; float:left;}
    #mcs_container .customScrollBox .content{clear:both;}
    #mcs_container .customScrollBox .content p{padding:0 5px;}
    #mcs_container .customScrollBox .content p.alt{padding:10px 5px; margin:10px 0;}
    #mcs_container .customScrollBox img{border:5px solid #fff;}

    #mcs_container .scrollUpBtn,#mcs_container .scrollDownBtn{position:absolute; display:inline-block; width:11px; height:5px; margin-right:12px; text-decoration:none; right:0; filter:alpha(opacity=100); }
    #mcs_container .scrollUpBtn{top:0px; background:url(../images/mcs_btnUp.png) center center no-repeat; left:0}
    #mcs_container .scrollDownBtn{bottom:0px; background:url(../images/mcs_btnDown.png) center center no-repeat; left:0}
    #mcs_container .scrollUpBtn:hover,#mcs_container .scrollDownBtn:hover{filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.60; opacity:0.60;}

    #mcs_container .dragger_container{position:relative; width:1px; height:149px; margin:6px 0px 0 5px; background:#cbbfbb; cursor:pointer;}
    #mcs_container .dragger{position:absolute; width:12px; height:15px; background:url(../images/scroll-dragger.gif) no-repeat; text-align:center; line-height:30px; overflow:hidden; cursor:pointer; left:-4px}
    #mcs_container .dragger_pressed{position:absolute; width:9px; height:16px; background:url url(../images/scroll-dragger.gif) no-repeat; text-align:center; line-height:16px; overflow:hidden; cursor:pointer; cursor:s-resize;}

    Reply
  2. Tony
    Posted on August 8, 2011 at 02:42 Permalink

    this plugin doesn’t seem to work on firefox 5

    Reply
    • malihu
      Posted on August 10, 2011 at 18:05 Permalink

      Hi, did you checked the actual demo or another implementation of the script? The demo is working well on Firefox (including version 5).

      Reply
  3. Tim
    Posted on August 3, 2011 at 19:48 Permalink

    Hey,
    I just don’t get it.
    I try to get this code into wordpress, but it doesn’t work.

    here’s my code:

    [somepics….]

    ….
    the scripts in my :

    <script src="/js/jquery.easing.1.3.js” type=”text/javascript”>
    <script src="/js/jquery.mousewheel.min.js” type=”text/javascript”>


    i noticed that wordpress uses the “enqueue script” function, but I don’t understand how it works.

    and that’s before the tag:

    $(window).load(function() {
    mCustomScrollbars();
    });

    function mCustomScrollbars(){
    $(“#mcs5_container”).mCustomScrollbar(“horizontal”,500,”easeOutCirc”,1,”fixed”,”yes”,”yes”,20);
    }

    /* function to fix the -10000 pixel limit of jquery.animate */
    $.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
    return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == ‘undefined’ ? 0 : r;
    }

    /* function to load new content dynamically */
    function LoadNewContent(id,file){
    $(“#”+id+” .customScrollBox .content”).load(file,function(){
    mCustomScrollbars();
    });
    }

    …..

    so maybe you can help me with that one.

    Greets, Tim

    Reply
    • malihu
      Posted on August 4, 2011 at 10:46 Permalink

      Hi Tim,

      A way to properly include jquery as well all the necessary scripts in your wordpress is this:
      In your wp theme directory you should have a functions.php file. Edit this file and add the following function at the top:
      function init_js(){ if(!is_admin()){ /* jquery (google CDN) */ wp_deregister_script('jquery'); wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'); wp_enqueue_script('jquery'); /* jquery UI (google CDN) */ wp_deregister_script('jquery-ui-core'); wp_register_script('jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'); wp_enqueue_script('jquery-ui-core'); /* easing */ wp_register_script('easing', get_bloginfo('template_directory') . '/js/jquery.easing.1.3.js','', '1.3', true); wp_enqueue_script('easing'); /* mousewheel */ wp_register_script('mousewheel', get_bloginfo('template_directory') . '/js/jquery.mousewheel.min.js','', '1.0', true); wp_enqueue_script('mousewheel'); /* custom scrollbar */ wp_register_script('mCustomScrollbar', get_bloginfo('template_directory') . '/js/jquery.mCustomScrollbar.js','', '1.0', true); wp_enqueue_script('mCustomScrollbar'); } } add_action('init', 'init_js');

      This includes jquery and jquery UI (one time only) from google CDN and the rest of the scripts from the directory js inside your themes folder (you can change the path to where your scripts reside).

      You should also not forget to link jquery.mCustomScrollbar.css in your header.php as well as to add the script call in your footer.php or on the template you need.

      Reply
  4. Gaz
    Posted on August 2, 2011 at 22:20 Permalink

    If you get the scroller going in reverse check lines 318 and just
    targY = Math.abs(targY) * -1;
    to ensure it’s negative since for some reasons with dyn loaded content (esp. images) the targY stuff ends up being positive instead of neg.

    Reply
    • Maurizio
      Posted on April 19, 2012 at 13:15 Permalink

      It worked for me!
      Thanks a lot!

      Reply
  5. SteveG
    Posted on August 1, 2011 at 22:49 Permalink

    Hi,
    I have a question that involves cross-browser compatability and the user’s default font setting for the browser which they are using. If a users browser font size is set to be larger causing text to overflow, how do you have the dragger appear and reappear depending on the scale of the box?

    Reply
  6. Luke
    Posted on August 1, 2011 at 09:23 Permalink

    Hey Malihu!
    Your blog and your posts are pure awesomeness!
    Thanks to your ass kicking codes, files and tips, I’m able to design like a boss. My soon-to-be website has professional ass kicking looks, and I’m 100% internet self taught!

    You rock.
    Please make more cool posts like these.

    Take care.

    Reply
  7. khaled
    Posted on July 26, 2011 at 18:59 Permalink

    Hi Malihu,

    Thanks for sharing this and for your continued support.

    Any ideas how to load new content dynamically when scrolling reaches the end? What i want to do is when scrolling to the bottom load new content into the page and readjust the scroll bar of course?

    Regards,
    Khaled

    Reply
  8. Adam Bell
    Posted on July 24, 2011 at 18:06 Permalink

    I’m trying to integrate the Custom Content Scroller in a WP E-Commerce Shopping Cart widget and there’s definitely some issues where the content either does not scroll at all or it scrolls but in the wrong direction. I’m wondering how feasible it is to incorporate this into a tight PHP script? The page in question is for a Rock Fashion site and can be viewed here.

    Reply
  9. Pete
    Posted on July 23, 2011 at 15:35 Permalink

    Hi again Malihu

    I’ve solved the problem with applying your scrollbars to form-based content, so just thought I’d post an explanation in case it’s helpful to you or anyone else.

    First thing is the html needs to be re-arranged slightly – because you have the “dragger container” div inside of the “customScrollBox” div, when you tab between form fields and the browser repositions the content, the scrollbar moves with it. There’s actually no need for the scrollbar to be inside that “overflow:hidden” div, so just move it outside. I actually think the best way is to define the scrollbar div first, and float it right instead of left. Obviously it may be necessary to fiddle with CSS a bit to maintain the page layout depending on the situation. So I’ve changed the html structure to something like this:

    … content …

    and the CSS for “dragger_container”:

    .dragger_container { position: relative; float: right; width: 0px; height: 300px; ….}

    Once that’s done the scrollbar no longer gets “lost” when the browser repositions the content, but of course it still doesn’t scroll without some extra jQuery code. This was actually pretty simple to implement once I worked out what was going on with the rest of your code.

    Basically if the browser has moved the content in order to bring a form field into view, you need to move the “dragger” by the equivalent relative amount. So firstly you need to know the ratio of the scrollbar size to the content size to determine how much to move the dragger. After studying your code I realised you’re already doing this calculation, but – here’s a note on variable naming (as a long-time developer 🙂 ) – you put this ratio value into a variable called “scrollAmount”. When I saw this I figured it contained a pixel amount value to be scrolled, but it doesn’t. So I’ve renamed this variable “scrollRatio” which makes a lot more sense (to me at least).

    So once you’ve got the ratio, determining how much to move the dragger is pretty much the reverse of what you do to work out how much the content should move when the dragger is dragged, i.e.:

    1) get the amount the content has moved (which is just it’s top position);
    2) negate that value, as obviously the dragger should move in the opposite direction to the content;
    3) divide by the “scroll ratio”.

    This needs to happen whenever a form field gets focus, as that’s when the browser has potentially repositioned the content. So to implement this I added the following to the jQuery code just before the Scroll function (the first line replaces your “scrollAmount” calculation – just to be clear):

    var scrollRatio = (totalContent – (visibleHeight / bottomSpace)) / draggerContainerHeight – draggerHeight);

    $(‘:input’, $customScrollBox_container).focus(function() {
    var contentTop = $customScrollBox_container.position().top;
    var newDraggerPos = (-contentTop / scrollRatio);
    $dragger.css(“top”, newDraggerPos);
    });

    This could probably be done in one line without all the extra variables, but just wanted to make it clear what I’m doing.

    Cheers.

    Reply
    • Pete
      Posted on July 23, 2011 at 15:52 Permalink

      Sorry my new html structure got lost / interpreted – should’ve known that would happen :).

      Here it is again, hopefully this will post successfully:

      <div id=”myDivToApplyCustomScrollbar”>
      <div class=”dragger_container”>
      <div class=”dragger”></div>
      </div>
      <div class=”customScrollBox”>
      <div class=”container”>
      … content …
      </div>
      </div>
      </div>

      Reply
      • malihu
        Posted on July 25, 2011 at 21:54 Permalink

        Awesome Pete,
        Thanks for taking the time to post this. I’ll definitely implement it on the next update of the plugin 🙂 Thank you!

        Reply
      • Amy
        Posted on August 6, 2011 at 09:27 Permalink

        Any chance you can help me get this fix working before you update?

        It’s not working for me (the html/css fix is fine, the jquery is where I’m having trouble), Dreamweaver says there’s a syntax error but I’m not good enough with jquery to figure it out. The program is showing the issue is with the ” / bottomSpace)) / ” part of the code (I understood where to put it, and to replace the line mentioned by the author). Any help would be appreciated, I’m using this for a WordPress site and it was working perfectly until I got to the “contact” page with the form!

        Fantastic work though, I really appreciate you sharing the code!

        Reply
  10. frank
    Posted on July 21, 2011 at 17:45 Permalink

    Im not that great at CSS and was wondering if you would have a CSS snipet on having on a horizontal scroller a left and right arrow appear righh before and after?

    The same thing as your vertical examples!

    Thanks, and great work!

    Reply
  11. Gavin
    Posted on July 17, 2011 at 07:15 Permalink

    I’m having the same problem as Sam and Eric above with IE7 setting the width on “horWrapper” to “999999” and then not setting the new value once the content has loaded.

    @Sam: In future, instead of saying “Hi, don’t worry. I fixed the issues.” why don’t you posted how you fixed it so other like myself won’t have to waste everyones time with re-posts of the same problem??

    Reply
  12. Pete
    Posted on July 16, 2011 at 19:17 Permalink

    Hi Malihu

    First of all, good work with the plug-in. There seem to be numerous custom scrollbar plug-ins out there, but I really like how customisable yours is via CSS.

    I’ve been trying to use your plug-in on a project, but I’ve hit a problem – I’ve searched extensively and scoured all the previous comments here but I don’t think anyone else has mentioned this.

    The problem is, if you have a form containing text boxes etc within the scrollable content, when you tab between form fields the custom scrollbar html structure gets messed up if you tab to a field that is initially out of view.

    You can replicate this problem easily – just add a inside your “content” div, obviously with enough content to activate the scrollbar. Put a text field at the top of the form and another at the bottom. Click in the first text field so that it has focus, then hit the tab key to move to the next text field and you’ll see what happens.

    I can tell you exactly what’s happening and why – I just haven’t managed to find a solution to this yet! What happens is when the second text field gains focus, because it is out of sight within the overflow: hidden div, the browser automatically re-positions that div to bring the field into view. Because the browser does this automatically, no jQuery code is executed, so the scrollbar doesn’t scroll. In fact, the scrollbar div is moved up by exactly the amount required to bring the text field into view, so it disappears off the top of the content container (or at least partially disappears, depending on how much content there is).

    I think what is needed is to somehow capture the fact that the next field is out of view from each field’s blur and / or focus event, and force the content to scroll by the amount required to bring that field into view, before the browser automatically shifts the overflowed div. I don’t know if it’s possible though to prevent this automatic browser behaviour. Of course this needs to work in reverse as well, so when using shift-tab to go back through form fields the content will scroll back up.

    If I work out a solution to this I’ll let you know with another post; in the meantime I’ll leave it with you.

    Cheers.

    Reply
    • Pete
      Posted on July 16, 2011 at 19:30 Permalink

      Hi again

      Sorry just wanted to add to my previous comment – this seems to be an issue with every scrollbar plug-in I’ve tried, so it’s not just yours! But if you can find a solution maybe it will help others.

      Cheers.

      Reply
      • malihu
        Posted on July 16, 2012 at 08:57 Permalink

        This issue is fixed on version 2.0 😉

        Reply
  13. Fred
    Posted on July 12, 2011 at 22:25 Permalink

    Awesome control. The dragger won’t display in FF5 though. I haven’t tried it on any earlier versions as I just upgraded my machine to FF5, but it definitely doesn’t display the dragger. The scroll still works with the up/down arrows and mousewheel though.

    I used the scroller in mcs_container(the first example). The only difference between my code and your example is that there are additional divs inside the “content” div. Could this be causing the FF5 dragger issue?

    Has anyone else had problems displaying the dragger in FireFox?

    Reply
    • malihu
      Posted on July 15, 2011 at 00:32 Permalink

      The plugin works as expected in Firefox 5 as well on previous versions, so the issue you’re experiencing must have something to do with your implementation. You can check the demo on this post on ff5 to confirm that it works.

      Reply
  14. steve
    Posted on July 7, 2011 at 21:01 Permalink

    This is great! Thanks so much for sharing your hard work. I had a quick question about the mouse hand showing up when you rollover the scroll bar. In your demos they show up, but for some reason the one I’ve built shows no mouse cursor change. Any clue what I missed?

    Thanks!
    Steve

    Reply
    • Ryan
      Posted on July 8, 2011 at 04:08 Permalink

      @steve

      Try setting cursor: pointer in the css on the proper element!

      Reply
  15. Semih AYHAN
    Posted on July 5, 2011 at 18:11 Permalink

    that’s awesome. Thank you

    Reply
  16. Thomas
    Posted on July 1, 2011 at 12:00 Permalink

    Is there any way to define scroll direction? Ie. is it possible to have a horizontal scrollbar, that goes from right to left, as opposed to left to right?

    Reply
    • Jeff
      Posted on July 7, 2011 at 17:19 Permalink

      I would love to hear a reponse on this as well.

      Similar to this, is it possible to have a horizontal scrolling section that starts at the end of the content, with the scroll bar all the way to the right. Can we set the starting position of the scroll bar?

      Thanks, and great work.

      Reply
  17. Naina
    Posted on June 28, 2011 at 20:51 Permalink

    hi…
    sorry in advance if m here with so stupid problem. Its second time m using this awesome jquery. It worked fine in my last project but this time i have combined it with an gallery that is slidable. My problem is that this jquery works fine when page is loaded but after the content are slided and when come back to the same content where i have used mcs scrollbar jquery, this scrollbar jquery stops working. can some one figure it out? I m using “gallriffic” jquery for image gallery and also have tried changing placement of queries…..

    Reply
    • Dave
      Posted on June 30, 2011 at 04:24 Permalink

      I’ve just started using this plugin (it’s awesome!) however, I’m finding that sometimes it doesn’t scroll to the bottom of the content. It may scroll 80% down then the scroller reaches the end, however the bottom of the content is not visible.

      Any ideas what could possibly be causing this? Thank you!

      P.S. Sorry for posting this twice and to a reply – I don’t see where to add a new comment.

      Reply
  18. Oren
    Posted on June 28, 2011 at 15:13 Permalink

    hi.
    i added the scroller to 2 pages in the same exact way.
    for some reason it works in this page but not in this page.
    can you tell what’s the problem?
    thanks 🙂
    oren

    Reply
  19. Adam
    Posted on June 27, 2011 at 14:49 Permalink

    Hi,

    Thanks for this awesome scrollbar! I have encountered a problem though. I use this script with lightbox (the original one), and I can’t get both to load. I’m new to javascript, so I guess it’s a simple problem, but I can’t get it to work.

    This is what i use in my header:

    Do I have to change some onload event or something like that? As I said; I’m new to javascript, so if you provide a solution, please write where I should put it etc.

    Thank you in advance!

    Reply
    • malihu
      Posted on June 28, 2011 at 21:06 Permalink

      Hello Adam,

      If I’m not mistaken, the original lightbox (or lightbox version 2) uses prototype/scriptaculous. That might conflict with jquery. I’ll definately try to find some time to update this script to be more compatible with other js libraries but in the meantime try this:

      In your document, wrap the script with (function($){… and …})(jQuery); making it like this:
      <script> (function($){ $(window).load(function() { $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10); }); })(jQuery); </script>

      You may also need to add jQuery.noConflict(); right before (function($){. Depending on the order you load the libraries (prototype, jquery etc.), adding this might help.

      Edit jquery.mCustomScrollbar.js and do the same by adding (function($){ as the 1st line and })(jQuery); as the last line of the script.

      Hope it helps.

      Reply
      • Adam
        Posted on July 1, 2011 at 10:59 Permalink

        Hi,

        Works like a charm, thank you so much! You saved me there. 🙂

        Reply
      • Adam
        Posted on July 1, 2011 at 18:46 Permalink

        Hi again,

        The previous problem is solved, thank you, but I got problem with extremely fast scrolling in safari on OSX. I tried the modified jquery.mCustomScrollbar.js file, but with no luck. I tried to change the mousewheelDelta to 1 just to try, but then I got an extremely slow scrolling speed in chrome. So, how do I solve this problem?

        I also got a question to you about this script; is it possible to add a auto scroll when the user moves the cursor from left to right etc.? For example; if the user slightly moves the cursor to the right, the images (or content) scrolls to the right, etc. Is this possible to implement?

        Thank you!

        Reply
  20. Joel Brown
    Posted on June 25, 2011 at 19:47 Permalink

    Fantastic scrollbars! Easy to implement on my webpage and quite customizable. Something I haven’t been able to do, though, is enable a scroll when simply hovering over the scroll buttons, so that a click is not required. Do you know how we can add this functionality? I tried adding code such as onmouseover=”$(“.scrollUpBtn”).click();” or onmouseover=”BtnsScroll(‘down’);” but none of it seems to work.

    Thanks!

    Reply
    • Tommy Gun
      Posted on September 21, 2011 at 12:33 Permalink

      I too have tried (not very hard, I must admit) to get the roll-over/mouseover to trigger the .click() event.

      I tried adding both this…

      $('.scrollUpBtn').mouseover(function() { $(this).click(); });

      …and explicitly, ie. not using this…

      $('.scrollUpBtn').mouseover(function() { $('.scrollUpBtn').click(); });

      …after the $("#id").mCustomScrollbar(...); is initialised. But, without success.

      The .mouseover event triggers as/when it should but the simulated .click() isn’t carried out it seems.

      Anyone solved this? Someone must have done this already?! Please share!

      Reply
      • Tommy Gun
        Posted on September 21, 2011 at 12:57 Permalink

        (I see my second ‘explicit’ effort wasn’t all the explicit, as it selected all elements of the .scrollUpBtn class, so ignore that.)

        Since that I have tried replacing .click() with $(this).trigger('click');.

        And…

        $('.scrollUpBtn').bind('mouseover', function() { $(this).trigger('click'); });

        …again both without success.

        The .mouseover is still working, it’s just the click that isn’t?!*&^@#

        Reply
      • Robert
        Posted on May 24, 2012 at 15:58 Permalink

        Use this 😉

        $(‘.scrollUpBtn’).bind(‘mouseover’, function() {
        $(this).trigger(‘mousedown’);
        });

        Reply
        • Elron
          Posted on December 1, 2012 at 16:30 Permalink

          Thanks alot Robert, works great!!
          Note that the class name has changed
          from “.scrollUpBtn” to “.mCSB_buttonUp”

          Reply
  21. jQuery Examples
    Posted on June 24, 2011 at 23:09 Permalink

    excellent, very nice scrollers. thanks

    Reply
  22. DBoss
    Posted on June 22, 2011 at 17:23 Permalink

    Excellent work Malihu!
    Everything is working just fine, but I have already talked about problem and I can’t fix it :/

    http://jquery.design-boss.com/beta

    Take a look at above example, as you can see, when you open “REFERENCE” tab, the scroller isn’t showing properly, but once you change window size the scroller shows it self. I was trying everything that you said above, but still can’t figure it out.

    I’m using this code for showing/hiding the content:

    $(“#menu ul li a”).click(function() {
    var menuVal = $(this).attr(“class”);

    if($(this).hasClass(“current”)) {}

    else {
    $(“#content, .contentWrapper”).hide();
    $(“#content, .contentWrapper.content-“+menuVal).fadeIn(500);
    $(“#menu ul li a”).removeClass(“current”);
    $(“#menu ul li a.”+menuVal).addClass(“current”);
    }

    });

    Help! 🙁

    Reply
    • DBoss
      Posted on June 23, 2011 at 15:50 Permalink

      Ok, I’ve fixed it, but it doesn’t show scroller immediately, but it delays for like 0.5 second.
      I’ve done this:

      $(“#content, .contentWrapper.content-“+menuVal).fadeIn(500,function(){$(“#mcs5_container”).mCustomScrollbar(“horizontal”,500,”easeOutCirc”,1,”auto”,”yes”,”no”,20); });

      Is it possible to make scroller show immediately, so it doesn’t lag?

      Reply
      • malihu
        Posted on June 23, 2011 at 16:38 Permalink

        The 500 milliseconds delay is due to the fact that you call mCustomScrollbar as a callback after the fade-in animation is done (your fadeIn() lasts 500 milliseconds, thus the half-second delay). You can try putting mCustomScrollbar function call outside of fadeIn() like this:

        $(“#content, .contentWrapper.content-”+menuVal).fadeIn(500); $(“#mcs5_container”).mCustomScrollbar(“horizontal”,500,”easeOutCirc”,1,”auto”,”yes”,”no”,20);

        to see if it works.

        Reply
      • DBoss
        Posted on June 23, 2011 at 16:51 Permalink

        This works, but the “.dragger” wont show up… I can see the dragger line, but the dragger itself wont show up. I’ll try removing all other plugins and double check the CSS/JS code.

        Reply
      • DBoss
        Posted on June 23, 2011 at 17:11 Permalink

        Looks like it’s working fine now. I’ve fixed the dissapearing dragger using default css/js for scroller.

        Thanks Malihu for your help, I really appreciate it!

        Reply
  23. Nicky
    Posted on June 21, 2011 at 23:04 Permalink

    Hi malihu,

    Great work! Just one question – is there a way to make the actual content draggable with the mouse without additional plugins?

    Reply
    • malihu
      Posted on June 22, 2011 at 01:47 Permalink

      Not really. It would probably need the same amount of code anyway.
      On a live production website you could of course create a single js file containing all plugins (less html requests) and minify it. You could also download a custom built jquery ui containing only the functions your scripts need (less file-size).

      Reply
  24. RPGMS
    Posted on June 21, 2011 at 15:22 Permalink

    Hi!
    First of all, great work, very user-friendly and all.
    Now I’m trying to combine the jQuery resizing with this, and I’ve got an annoying problem.
    If I resize my box higher than my content, the scrollbar disappears.
    (In my case, I was like: neat! They even thought of this case! Though I’m also curious if I can make the scrollbar somehow remain visible.)
    The problem, is that after the scrollbar disappears, and I use my mousewheel, the content suddenly disappears too!

    I hope you can help me with this. 🙂

    Reply
  25. Fabio Alexis
    Posted on June 18, 2011 at 20:07 Permalink

    Thank`s for your great job!

    I’m using vertical bar in this project:
    http://www.portaldocolaborador.com/cartaoclubemais/regulamento.html

    but I don’t understand why dragger line (and dragger button) aren’t visible.
    Can you help me?

    Reply
    • malihu
      Posted on June 19, 2011 at 03:30 Permalink

      Hello Fabio,

      Had a quick look into your document with firebug and seems that .container div overlaps and hides .dragger_container. Try to change your css properties of either one of these.

      Reply
  26. Andre
    Posted on June 13, 2011 at 20:39 Permalink

    I love the plugin, but I am still trying to get it work on my wordpress project. The problem I am facing now is that it only works when I place the loading tags for the scripts (jquery.min.js, jquery-ui.min.js, jquery.easing.1.3.js, jquery.mousewheel.min.js”) below the
    tag in the header.

    But when I do that, one of my wordpress navigation plugins stops to work…When I move the “script”-tags ABOVE the wordpress tag then my wordpress navigation plugin works, but then your custom scrollbar doesn’t work anymore… 🙁

    The navigation plugin I am referring to is this: http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/

    Any idea to how I can resolve this problem?

    Reply
    • Lee
      Posted on June 18, 2011 at 20:14 Permalink

      Hi,

      if you want to add the jQuery library to WordPress you need to use the enqueue_scripts function. Otherwise when you load jquery manually it will overwrite any jquery plugins, which have loaded previously.

      If you are going to stick with the jquery menu plugin then this automatically loads jquery for you so you can include the above code but just miss out the actual jquery file

      Reply
  27. Jun Woong
    Posted on June 13, 2011 at 04:11 Permalink

    Thanks for the terrific plug-in.

    I think I found a small bug and a fix for it: the mouse-wheel event hander should be detached even when no scroll bar is necessary because of the short contents.

    This causes a problem on Chrome (mine is 12.0.742.91) when the stuff to which the customized scrollbar applies is dynamically generated. You can see it when the following conditions hold:
    – the whole page is long to have the browser scrollbar
    – the area using the lib gains its stuff dynamically
    – the area has some long contents to make the customized scrollbar appear
    and then is replaced by some shorter to make the scrollbar disappear
    – the page scrollbar from the browser is not at its top
    – now using the mouse wheel on the area messes up its contents.

    Hope this helps.

    Reply
  28. duncan
    Posted on June 11, 2011 at 17:17 Permalink

    Hey guys,

    Any fix for IE9 – everything breaks :(…

    Cheers
    Ken

    Reply
    • malihu
      Posted on June 12, 2011 at 13:47 Permalink

      Hi duncan,
      The plugin works well on ie9. The demo works perfectly well for me (re-check your implementation to see if any css property breaks the script).

      Reply
  29. JUSTIN
    Posted on June 10, 2011 at 00:21 Permalink

    “Ignore both the above, all working now :)”

    Ggnn.. I hate when people do this. Would it be so hard to provide an answer?

    I had the same problem (scrollbar disappearing after load). The problem was that my content (text) was in a DIV container which himself had a determinated height (css) property. I simply removed the height so this JQuery plug-in could do the work, i.e. get the proper height in a dynamic way.

    Hope this helps.

    Reply
    • malihu
      Posted on June 10, 2011 at 02:34 Permalink

      Thanks for taking the time to post your solution Justin 🙂

      Reply
  30. Bien Selvano
    Posted on June 9, 2011 at 05:19 Permalink

    Sir,

    Forget my Question # 2 above. I solved the problem. I saw isHrisov’s comment above and aplied it to horizontal scrolling: I put this:

    $customScrollBox.css(“overflow”, “hidden”);
    $dragger_container.css(“display”, “block”);

    right after:

    if($customScrollBox_container.width()>visibleWidth){ //enable scrollbar if content is long

    thank you so much for this ass-kicking script! keep on rocking! 😉

    Reply

Comments pages: 1 4 5 6 7 8 84

Post a comment

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

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

css.php