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

  1. Marcos
    Posted on April 20, 2011 at 12:47 Permalink

    Hey man, really awesome work. thanks for that.

    The only thing that concerns me a bit is the markup.
    Wouldn’t it be possible to only create a simple element, add a specific class and make the plugin do all the heavy work from there? like

    <ul class='scroller'> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> <li> item 4 </li> </ul>

    then the plugin itself would create all the structure, containers and handlers it is needed?

    That would really make lives really simple and only let the developer worry about markup that matter within the page?

    But congratulations again it is a really awesome pluging πŸ™‚

    Reply
  2. jc
    Posted on April 20, 2011 at 03:42 Permalink

    Was wondering how to get rid of the scroll bar if needed. I seen in the article where it says to add hide function after the call, but I’m not that great with javascript yet, so if you could show me the code with this included that would be awesome. Also, thanks for this great plugin, it works beautifully.

    Keep up the good work.

    Reply
  3. Ryan
    Posted on April 17, 2011 at 02:08 Permalink

    Hi There,
    I’ve just worked this into a site I’m doing and it looks great. However I tried to do the fix for iPhone you suggested to a couple people above, it doesn’t work. This is the code that I tried, I placed at the end of the jquery.mCustomScrollbar.css file and I’ve tested just setting a background colour for the div and it is responding. Just that it doesn’t give me a regular scroll bar. Any idea what I’m missing?

    @media only screen and (max-device-width: 480px) { #mcs_container .customScrollBox { overflow: auto; } #mcs_container .dragger_container{ display:none; } }

    Reply
    • malihu
      Posted on April 17, 2011 at 06:41 Permalink

      In addition to altering css, you’d need to skip mCustomScrollbar function call. You can do this with a simple js condition. Check here:
      http://snipplr.com/view/31607/iphone-ipad-ipod-detect/

      Reply
      • Larissa
        Posted on May 31, 2011 at 03:27 Permalink

        Hm, I’m having trouble implementing this iphone fix. What exactly is the code you use, that you put in between the below, to skip the mCustomScrollbar function call? And where do you put this? Sorry if this is a dumb question, I don’t know js/jquery well at all….Really appreciate your help!!

        jQuery(document).ready(function($){
        var deviceAgent = navigator.userAgent.toLowerCase();
        var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
        if (agentID) {

        // do something special

        }
        });

        Reply
      • Christian Lopez
        Posted on December 17, 2011 at 19:58 Permalink

        Hi Malihu,

        Thank you for your great work and generosity with this script. I’m also confused as to how we would skip the function. Your help with this would be greatly appreciated. I was able to add detection to my CSS, but can’t for the life of me get the script you linked to, to “skip the function” so I can see default iPhone or iPad scrollbar. Thanks in advance.

        Reply
  4. Leeas
    Posted on April 16, 2011 at 04:19 Permalink

    Excuse me, do not prompt the implementation of a permanent ajax load data at a bias of scrolling to the specified number of pixels. The fact that it does not do, say here’s the code:

    $(function()
    {
    var settings = {
    //showArrows: true,
    animateTo:true,
    animateInterval:30,
    animateStep:45,
    maintainPosition: false
    };
    var pane = $(‘.scroll-panel’)
    pane.jScrollPane(settings);
    var api = pane.data(‘jsp’);
    var i = 1;

    $(‘.scroll-panel’).bind(‘jsp-scroll-y’,
    function(event, scrollPositionY, isAtTop, isAtBottom) {
    if(scrollPositionY >= (($(“#content-wrapper”).height() – $(“.scroll-panel”).height()) – 60)) {
    $(“#content-wrapper”).append(“This is paragraph number 123”);
    api.reinitialise();
    }
    });
    });

    at re-initialization of the scroll “jumps” up …

    I can not find solutions to the load data like Twitter, please help with the code. Thank you in advance.

    Reply
  5. yan
    Posted on April 14, 2011 at 11:09 Permalink

    Thax for your work this is really cool~!

    Reply
  6. Theresa Stanton
    Posted on April 13, 2011 at 09:16 Permalink

    I just wanted to comment and THANK YOU for a really awesome jquery solution for horizontal scrolling. After some difficult (on my part mostly I’m sure) I was able to implement your plugin in a horizontal photo blog that I came up with. Here it is if anyone’s interested in testing it for me: http://blogsforphotogs.com/horizontal

    Please ignore the fact that I use jScrollpane for the vertical scrollbars on the text blocks. I needed to be able to turn off the horizontal scroll on mobile devices but keep the scrolling on the text boxes, so that was the easiest way I could find to implement it. I also wasn’t sure if nexted scrollbars would work very well so I didn’t want to risk it.

    Reply
    • Theresa Stanton
      Posted on April 13, 2011 at 09:17 Permalink

      *nested not nexted.

      Reply
    • malihu
      Posted on April 13, 2011 at 09:26 Permalink

      Thanks a lot for sharing your implementation and for your kind comments Theresa πŸ™‚

      Reply
  7. Sebastian
    Posted on April 12, 2011 at 17:33 Permalink

    Hi, a really great code! I work with the horizontal scroller but it breaks in my Internet Explorer 8! Also your horizontal scroller example on your site overflows in IE8. Do you know a quick fix?

    Reply
    • Sebastian
      Posted on April 12, 2011 at 17:49 Permalink

      SORRY, MY MISTAKE. No problem with IE8. I was calling the scripts in the wrong order.

      Reply
      • Ryan Wheelock
        Posted on June 3, 2011 at 22:07 Permalink

        I am having the same issue. The horizontal scroller works in firefox and chrome no problem but is breaking in IE 8 where I’m using it on my site and in the demo on this page. What order do the scripts need to be called Sebastian? Plz help me…

        Reply
  8. Bryan Tamayo
    Posted on April 11, 2011 at 15:22 Permalink

    I am using a horizontal slider with very large images in my scroller. I would like the images to be sort of magnetic to auto stick to the image, so that the images center themselves? Has anyone done anything like this with your scrollers?

    The scrollers are awesome! If I can only get this one function to work they’d be perfect for my use. Can I write an if statement based on dragger position? Is there another solution?

    Thanks for your help!

    Reply
  9. Jonathan Holler
    Posted on April 10, 2011 at 13:21 Permalink

    Thx very very much for this nice Scroller…
    It was so easy to customize it for my own needs. You can see the result on thegoriandreys.com

    Greetings from Hamburg,
    J. H.

    Reply
    • malihu
      Posted on April 10, 2011 at 20:49 Permalink

      Great πŸ™‚ Thanks for sharing!

      Reply
  10. Jaco
    Posted on April 8, 2011 at 04:24 Permalink

    when calling the scrollbar function on dynamically loaded content, the scroller will back to the start. any way to maintain the position while resizing? πŸ™‚

    Reply
    • malihu
      Posted on April 13, 2011 at 08:43 Permalink

      In jquery.mCustomScrollbar.js, inside if(reloadType!=”resize”… conditions (horizontal and vertical), remove or comment:
      $dragger.css("left",0); $customScrollBox_container.css("left",0); $dragger.css("top",0); $customScrollBox_container.css("top",0);

      Reply
      • saps
        Posted on November 17, 2011 at 20:45 Permalink

        I had the same issue and I commented the top = 0 for vertical scrolling. However I have dynamic expand/collapse buttons inside my content. If I collapse the dragger height gets calculated correclty but it does not scroll down correctly .. help!!!

        Reply
      • null
        Posted on June 11, 2012 at 13:42 Permalink

        After comments the code, when I dynamically remove some contents, the dragger becomes longer and out of the dragger container. and also the bottom leave some white space.

        Is there a way to solve it ?

        Reply
  11. Kent R
    Posted on April 7, 2011 at 05:52 Permalink

    Great script.

    As a Flash guy, I think it’s kinda funny that all over again we all are getting excited about the ability to scroll, fade things, movement…but I digress.

    I’m trying to learn jquery. Love this script. Have a unique requirement that I can’t figure out, but which should, I think, be relatively easy to implement.

    I have set up a page with one horizontal scrollbar. The Div contains about 2o items, side by side.

    I want to be able to load the page with the scrollbar dragger set to various x postitons. So, whereas the default of course is for the dragger to be at the left most side of the container (0px), I’d like a user to be able to arrive at the page with the dragger, for example, set 30% to the right, so that content item 7 of 20 (for example) is revealed; so that the content div has already partially been scrolled.

    Anyone have an ideas about how to mark this up?

    Basically, onLoad, I think I need a function that:
    1. sets $dragger.position to (x)
    2. triggers the scrollDownBtn event

    This is above and beyond, but I suspect that I’m not the only one could use this funtionality. Thanks for any help.

    Reply
    • Kent R
      Posted on April 7, 2011 at 06:00 Permalink

      To Follow up, my lame attempt to write this would be:

      $(window).load(function() {
      $(“#mcs5_container”).mCustomScrollbar.dragger.position=300;
      $(“#mcs5_container”).mCustomScrollbar.Scroll;
      });

      Is that syntax even close?

      Reply
      • malihu
        Posted on April 13, 2011 at 09:13 Permalink

        The logic is right πŸ™‚
        The way to get what you want is:
        Edit jquery.mCustomScrollbar.css and add a top value to the dragger. E.g.:
        #mcs_container .dragger{top:300px;}
        Edit jquery.mCustomScrollbar.js and add:
        Scroll();
        right below Scroll function. This should do the trick πŸ˜‰

        Reply
        • mistvan
          Posted on June 18, 2012 at 12:11 Permalink

          Hello malihu,

          I use your plugin. I have content with 500px. I scroll down and with ajax I add more data. I want to let content position to be the same as before and I want to resize dragger for new content.

          Is there way to calculate dragger top position based on content top position?

          Can you help me please?

          Reply
          • mistvan
            Posted on June 18, 2012 at 12:12 Permalink

            sorry, not resize, but move to right position based on new content height with new data.

          • malihu
            Posted on June 18, 2012 at 17:36 Permalink

            I’m currently developing version 2 of the plugin which will have a scroll-to feature (it will do exactly what you need).

            Unfortunately, I can not really help you at the moment as I don’t have time to add such functionality on the current version.

            To set the dragger top position in relation to updated content you need to divide the newly added element top position with the scrollAmount variable in the script.

            For example if you added the following markup in your content via ajax:

            <div id="new-elem-1">new content</div>

            you can calculate dragger top position by:

            $("#new-elem-1").position().top/scrollAmount

            Hope this helps a bit.

    • malihu
      Posted on April 13, 2011 at 09:02 Permalink

      I know the feeling, I’ve been a “flash guy” since for ever (I’ve done most of my js scripts in flash years ago), but it’s always interesting and fun scripting for the browser πŸ™‚

      Reply
  12. michael
    Posted on April 6, 2011 at 14:14 Permalink

    Hi there.

    I really love your script, it’s amazing!

    Just one thing bothers me: The scroll speed depends on the length of the content since scrolling is done by positioning the dragger and then positioning the content depending on the dragger position.

    So if we have a content of 1,000px height and a visible content with a height of 100px (which is also the height of the dragger container) the scrolling speed is totally different to a content of 500px height and the same visible height of 100px since the steps on the dragger container are the same but the content position refering to the dragger position is different. In fact, 1,000px of content height scroll 2x faster than 500px of content height if the dragger container has the same size.

    See what I mean?

    Is it possible to scroll not by positioning the dragger but using a given amount of pixels for each step? Or if it’s easier: Is it possible to position the dragger (when using mouse wheel and scrollbuttons) that it’s corresponding position of the content is stepping in a given amount of pixels?

    I really would like to have the same scroll speed for different heights of content. That would make your script even better (at least for me).

    Thank you very much!

    Reply
    • malihu
      Posted on April 13, 2011 at 09:38 Permalink

      The behavior is exactly as you describe and it’s the same with the browser’s native scrollbar. It’s basically how scrollbar works. To change that, would require a totally different script and I’m not sure if it would be good for usability or would work at all.

      Reply
      • michael
        Posted on April 13, 2011 at 10:31 Permalink

        Thank you for your answer.

        Didn’t ever notice that in my browsers. It always seems to me that the scroll speed is always with different heights of content.

        I’ll try to find a way to change your script to scroll a certain amount of pixels when using the arrows or mouse wheel and post it afterwards if I succeed. For me it feels more natural this way.

        Reply
  13. Kamal
    Posted on April 5, 2011 at 21:06 Permalink

    The best scrollbar plugin out there!
    Thanks a tonne Malihu! Thanks!
    Million internets to you! πŸ˜€

    Reply
  14. hansoloz
    Posted on April 4, 2011 at 22:10 Permalink

    You’ve done a wonderful job on this scroller!

    I’m wondering if there is any way to have the horizontal scroller position begin at center… giving the user the option to scroll left or right when the page loads.

    Thanks!

    Reply
    • malihu
      Posted on April 13, 2011 at 10:09 Permalink

      In order to change the initial position of the horizontal scroller, edit jquery.mCustomScrollbar.css and add a left value to the dragger. E.g.:
      #mcs_container .dragger{left:50%;}
      Also, edit jquery.mCustomScrollbar.js and add:
      ScrollX();
      right below ScrollX function.

      Reply
      • hansoloz
        Posted on April 13, 2011 at 17:12 Permalink

        Worked PERFECTLY – thanks again!!

        When this piece I’m working on goes live I’ll post a link πŸ™‚

        Reply
      • hansoloz
        Posted on May 2, 2011 at 19:11 Permalink

        explore.ironrange.org

        Fun implementation of your slider – thanks again for the support!

        Reply
      • malihu
        Posted on May 14, 2011 at 03:55 Permalink

        @hansoloz cool πŸ™‚

        Reply
      • Rene
        Posted on October 5, 2011 at 06:40 Permalink

        I cannot get the scroller to start at 200px instead of 0px, so the user can scroll left or right.
        Adding a Left in the CSS for the dragger does nothing.
        or maybe I’m placing the ScrollX(); in the wrong spot. In an earlier post you said to place it at line 142, which breaks the code, and is ‘before’ the Scroll function. so I’m confused. Please help.
        Thanks so much!!

        Reply
    • hansoloz
      Posted on April 14, 2011 at 22:25 Permalink

      One more quick question πŸ™‚

      Is there any way to turn off the animation when the page loads and scrolls to center? In other words I’d prefer for the page to load with the content in the scroll area centered, rather than it scroll to center after after everything loads…

      Thanks!

      Reply
  15. Vishal Modha
    Posted on April 2, 2011 at 15:17 Permalink

    Hi mate, thank you very much for this scroller, it’s great, and just wanted to add, the scroller with the up and down arrows is one of the few iphone and ipad compatible scrollers out there. I just need you help on one thing, I use jQuery TOOLS on my site, and jQuery UI doesnt get on with tools as they both have a function call to ‘TABS’, could you tell me which parts of jQuery UI you’re using exactly so that I could go and make a custom version of it with the bare minimum?

    Thanks again
    Vish

    Reply
    • malihu
      Posted on April 13, 2011 at 10:12 Permalink

      I only use draggable iirc πŸ˜‰

      Reply
      • hawk
        Posted on February 14, 2012 at 13:36 Permalink

        Hi, ive got same problem. I am using tabs, and this plugin works only in 1st tab. U downloaded only custom jqueryUI with only draggable, but it didnt solved my problem :-/

        any idea or solution?
        Thanks

        Reply
      • hawk
        Posted on February 14, 2012 at 18:01 Permalink

        …so problem solved πŸ™‚

        i have to call function mCustomScrollbars() opening tab… so i add before the function this:

        $(document).ready(function() {
        mCustomScrollbars();
        $(‘ul.tabs a’).bind(‘click’, function(){
        mCustomScrollbars();
        });
        });

        Reply
  16. Sam
    Posted on April 1, 2011 at 04:14 Permalink

    I’m having some issues with your plugin in IE7. scrolling right sends the scroller way beyond the limit of the content, but then scrollling left a few times makes it animate correctly back to its start point.

    You mentioned that you don’t support older browsers. does this include IE7?

    any ideas why I might be having this issue? Thanks.

    Reply
    • Sam
      Posted on April 1, 2011 at 04:46 Permalink

      Hi, don’t worry. I fixed the issues.

      πŸ™‚

      Thanks

      Reply
    • Eric
      Posted on June 8, 2011 at 01:16 Permalink

      I’m having similar trouble in IE7, actually. The script seems to be adjusting the width of the horizontal wrapper to the ridiculously high value, but it never resizes it to recalculated value. Any ideas on why?

      Reply
  17. Santtu
    Posted on April 1, 2011 at 02:04 Permalink

    I found a bug in the scrollbar, you can do it in the demo page:
    In the first demo scrollbar click and drag the scroll down arrow anywhere, the scrollbar scrolls all the way down, that easy to fix probably.. But here is the big problem, after previous task scroll back up and click the update content link, and then you cannot scroll all the way down of the new content!

    I am customizing this scrollbar to a page and noticed this bug.

    LOL at spam protection, “Sum of 1 + 3 ?” I enter 4, it says it is wrong!
    I must be really bad at math.. πŸ™

    Reply
    • malihu
      Posted on April 13, 2011 at 10:38 Permalink

      Thanks for reporting it! Issue is now fixed πŸ˜‰

      Reply
  18. Simone
    Posted on March 31, 2011 at 02:43 Permalink

    Hi there – I love the script!
    It works beautifully…except in the html file i want to place it in.

    You’ll notice in this file it doesn’t work:
    http://www.kapitalc.com/boqueria/menus/menus_tapas.html

    but in this file (same code)it works perfectly:
    http://www.kapitalc.com/boqueria/menus/test.html

    Perhaps another effect on this page is causing a conflict…?
    any help you could provide would be greatly appreciated!

    Reply
  19. Vinh Nguyen
    Posted on March 29, 2011 at 23:12 Permalink

    Hey,

    I’m back again for a small request.

    http://julietaing.com/

    The page looks beautiful, in part thanks to your nice scroller. At present, the scroller is a set width, I would however like to make it to 100% of the WINDOW size.

    When i set width to 100% either in the div dragger container, or within the CSS file, it sets it to 100% of the dynamically adjusted width, rather then the window size.

    What this causes is as you scroll, the scrollbar will go off to the right side and out of reach.

    Reply
  20. Vinh Nguyen
    Posted on March 28, 2011 at 12:22 Permalink

    Hi,

    Sorry I’m really new to this and can’t figure out why my page is doing what its doing.

    julietaing.com/beta4

    Upon page load:

    Menu doesn’t seem to load at all in chrome (no scrollbar/width set).
    In firefox they require 2 mouse clicks for width to be set accurately and scrollbars to adjust
    In IE it works fine.

    I tried the suggestions you gave to Alexandro on my page, though it still functions conditionally as described above. Please help. Thanks.

    -Vinh

    Reply
    • malihu
      Posted on March 28, 2011 at 19:15 Permalink

      Hello,

      Seems that many users have problems calling the scrollbar function on dynamically loaded content, so I’ve decided to include an additional tiny plugin (plugin info: http://benalman.com/projects/jquery-resize-plugin/) that checks when content changes its width or height and automatically calls scrollbar function.

      Firstly, get the plugin file:
      http://manos.malihu.gr/tuts/jquery.ba-resize.min.js
      and put it in the directory of your document.

      In the head of your document, before the closing head tag add:
      <script src="jquery.ba-resize.min.js"></script>

      At the bottom script, below your LoadNewContent function add:
      $(".content").resize(function(e){ $("#mcs5_container").mCustomScrollbar("horizontal",400,"easeOutCirc",1,"fixed","yes","yes",20); });

      With this, you can remove the other callback functions calls of mCustomScrollbar.

      Reply
      • Vinh Nguyen
        Posted on March 29, 2011 at 21:28 Permalink

        Hey,

        Just wanted to give an update that your suggestions worked. Thank you so much for taking the time to assist me!

        -Vinh

        Reply
      • [map]concepts
        Posted on May 15, 2012 at 19:27 Permalink

        Hello
        Can you share with you your code Mr Vinh Nguyen

        Reply
  21. John
    Posted on March 28, 2011 at 08:34 Permalink

    Is there any way to make this work on a mobile device.
    I Tried your samples on a droid and it didnt work.
    Im hoping to find a solution that allows scrollable divs
    on iPhone, droid etc and FF, safari, ie, chrome, etc.
    Is this possible?
    Thanx

    Reply
    • malihu
      Posted on March 28, 2011 at 18:55 Permalink

      Hi,
      Unfortunately mobile OS (iOS, android etc.) are very limited on jquery events or require jquery mobile framework to function properly.

      The best and easiest solution at the moment, would be to add a condition to check for mobile OS and apply a normal scrollbar (e.g. css overflow:auto) for it.

      Reply
  22. Alejandro
    Posted on March 28, 2011 at 04:43 Permalink

    Hello, very good job. Thank you very much for sharing.
    I have a problem. I use jQuery to display content in a div, it works great when you load the first time (using include), but when I go to another link and return the scroll does not work.

    The website is http://www.giselaverdessi.com/site

    Thank you very much

    PD: Sorry for my English.

    Reply
    • Alejandro
      Posted on March 28, 2011 at 04:45 Permalink
      • malihu
        Posted on March 28, 2011 at 05:08 Permalink

        Hello,
        You need to call mCustomScrollbars function every time you load new content on containers that have custom scrollbar. You should add it as a callback on your click event like this:
        $j("a.cargar").live('click', function(event){ event.preventDefault(); var url = $j(this).attr("href"); $j("div#contenido_include").fadeOut("slow").hide().load(url).fadeIn("slow",function(){ mCustomScrollbars(); }); return false; });

        Reply
      • Alejandro
        Posted on March 28, 2011 at 05:43 Permalink

        Works perfect.
        Thank you very much for an answer.

        Reply
  23. Vinh Nguyen
    Posted on March 27, 2011 at 10:16 Permalink

    Hi,

    First of all thank you so much for sharing your knowledge.

    Now, onto business. I’m currently using your script at a beta site I am doing, it seems to work well *however* on large content the “dynamic loading” function seems to cease working in certain browsers, while taking 2 clicks in others.

    (note picture links don’t work, but menu is suppose to)

    http://www.julietaing.com/beta4

    if you visit that page in CHROME: the menu links work, the content is loaded into the middle however something happens where it doesn’t adjust the width of the content div, and also doesn’t show up any scroll bars.

    Firefox: Clicking on menu links brings up the content div, however it takes a second click on the same link for all of the pictures to show up + scrollbar and width to be correctly displayed set.

    IE8 (browser): Surprisingly page seems to work in IE8. (surprisingly because well IE sucks)

    IETESTER: ”
    LINE 344,
    CHAR 4
    Error: ‘$dragger.position().top’ is null or not an object
    Code 0

    Please help,

    Thanks,

    Vinh Nguyen

    Reply
  24. isHristov
    Posted on March 24, 2011 at 21:29 Permalink

    Malihu, is there a way to make this plugin work without the jquery UI? Not everyone is using it and thus it plays a quite negative role in page load time.

    Btw, you can see the implemented plugin right here – http://webpresence.bg/seo/en/ . I promised to show you this a long time ago but I had a lot on my mind these days. πŸ™‚

    Cheers! πŸ™‚

    Reply
    • malihu
      Posted on March 25, 2011 at 05:06 Permalink

      Great πŸ™‚
      The script needs jquery UI for many reasons (draggable, easing etc.). You can make your own build of jquery UI though to make it much more lighter (http://jqueryui.com/download) πŸ˜‰

      Reply
  25. Steven
    Posted on March 24, 2011 at 16:33 Permalink

    Great scrollbar! I almost have it working.
    It seems though that the height of my div is not calculated right.

    Check out my example here: http://www.meetsteven.com/scroller/

    What am I doing wrong?

    Reply
    • Steven
      Posted on March 24, 2011 at 17:03 Permalink

      Never mind. Got it working πŸ™‚
      Now my structure is the same as yours.

      Reply
  26. Anthony
    Posted on March 23, 2011 at 09:39 Permalink

    Hi Malihu,

    Can you do me a favor? I’m using your plugin now, and it used to work perfectly..but then suddenly it doesn’t work anymore – now the dragger can only be dragged to a certain point and half the content is hidden. Can you perhaps take a look at my page and suggest what might be wrong? (The black portion is the dragger_container – I thought it might make it easy to spot what’s wrong that way.)

    Really appreciate the help, thanks.

    Reply
    • Qais
      Posted on November 23, 2011 at 18:28 Permalink

      Add the following to the file jquery.mCustomScrollbar.js:
      after this line:

      put the following :
      totalContent = $customScrollBox_content.height(); scrollAmount = (totalContent - (visibleHeight / bottomSpace)) / (draggerContainerHeight - draggerHeight);

      drag: function(event, ui) {

      Reply
  27. Lindsey
    Posted on March 23, 2011 at 00:06 Permalink

    This seems to be the best scrollbar replacement script out there, and I’m excited to implement it into my work… just having some trouble that I hope you can help me with.

    I am currently working on a photography website for my sister using WordPress. I want to keep all pages at the same height, but I can’t get the page to scroll.

    This is the URL to my problem: http://testing.lindsey-martin.net/triciaann/about-2/

    I’m fairly new to web design and I have very little javascript knowledge. If there is anything I need to post here, let me know. Thanks in advance for any help.

    Reply
    • Lindsey
      Posted on March 23, 2011 at 02:52 Permalink

      I got it to work… Found out that in WordPress, when calling the function, “$” should be replaced with “jQuery”.

      Reply
      • Tim
        Posted on August 4, 2011 at 11:04 Permalink

        Hey Lindsey,
        I have the same problem. where exactly did your replace the “$” ?
        Greets, Tim

        Reply
  28. Diogo
    Posted on March 20, 2011 at 17:30 Permalink

    Nice work! For those who don’t want to change the HTML structure, just wrap your element using jQuery:

    $(‘.myScrollableElement’)
    .wrap(”)
    .wrap(”)
    .wrap(”)
    .wrap(”)
    .wrap(”)
    .parent().parent()
    .after(”);
    });

    I also prefered to change the plugin source to use $(this).find(…) instead of $(“#”+id+…). Now the container doesn’t need an id.

    I found the minimal overhead to be worth the ease of maintenance.

    Reply
    • malihu
      Posted on March 20, 2011 at 17:48 Permalink

      Thanks for posting this Diogo πŸ™‚

      Reply
  29. yendruh
    Posted on March 20, 2011 at 16:09 Permalink

    Hello,
    very nice script, i really enjoy it. But got question about it – if i try to set css hover on #mcs_container .dragger_container it doesn’t work on firefox. whole jquery functions are written in very hard style and can’t find where is the problem.

    Reply
    • malihu
      Posted on March 20, 2011 at 17:40 Permalink

      Just checked
      #mcs_container .dragger_container:hover{...}
      and
      #mcs_container .dragger:hover{...}
      on Firefox version 3.6.15 and work as expected.

      Reply
      • yendruh
        Posted on March 20, 2011 at 22:06 Permalink

        sorry, problem was with type declaration, without this line:

        it doesnt work πŸ˜‰

        Reply
  30. Rob
    Posted on March 19, 2011 at 12:11 Permalink

    Hi Malihu,

    Sorry to be a pain, but would you be able to have a quick look at my question a few posts above and let me know if you can think of a solution – would be greatly appreciated

    Thanks

    Rob

    Reply
    • malihu
      Posted on March 19, 2011 at 17:23 Permalink

      Sorry for the late response Rob.
      Try to add mCustomScrollbar function inside a condition that checks if div.trigger has class “active”. You can do it like this:
      if($('div.trigger').hasClass('active')){ $("#scroll-left-container").mCustomScrollbar("vertical",900,"easeOutCirc",1.02,"fixed","yes","no",0); }

      You should also call mCustomScrollbar function as callback in slideToggle function like this:
      $(this).toggleClass("active").next().slideToggle("slow",function(){ if($('div.trigger').hasClass('active')){ $("#scroll-left-container").mCustomScrollbar("vertical",900,"easeOutCirc",1.02,"fixed","yes","no",0); } });

      Reply
      • Rob
        Posted on March 20, 2011 at 07:12 Permalink

        Hi Malihu,

        Thanks alot for helping me with this. I didnt need the addClass actually so it worked using this:

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

        Thanks!

        Rob

        Reply

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