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 12 13 14 15 16 84

  1. Alecs
    Posted on June 28, 2012 at 23:55 Permalink

    Hi, great plugin.

    It has just one tiny detail… not all the classes in the required html are prefixed, so if you want to implement this plugin in a site which already uses classes as “content” and “container” (which are pretty common class names), you’ll have to change those classes throughout your entire site.

    My suggestion: update the plugin to use “mcs_” for all classes in the required html. That way you’ll avoid incompatibility issues.

    People are still coming to this site to download this plugin, and that’s because it is really good and versatile. It deserves to be improved. =)

    Cheers and thanks!

    Reply
    • malihu
      Posted on June 29, 2012 at 00:31 Permalink

      Yes, I’ve already implemented prefixes for the new version (every class has mCS_ or mCSB_ prefix). New version will be a big improvement in features (scroll to, user defined callbacks, auto-updating scrollbars etc.), ease of implementation and better coding for the script itself.

      Thanks a lot for your feedback and comments

      Reply
      • Alecs
        Posted on July 1, 2012 at 23:30 Permalink

        great stuff! can’t wait for the new version! =)

        thanks for making this plugin available. keep up the good work.

        cheers!

        Reply
        • malihu
          Posted on July 15, 2012 at 20:21 Permalink

          New version released!

          Reply
          • Alecs
            Posted on August 14, 2012 at 14:00 Permalink

            Hi malihu!

            Finally had a chance to test the new version in a project… and wow! What an improvement!

            This new version has overcome all expectations.

            You, sir, have done a really great job!

            Congrats!

  2. Andrzej
    Posted on June 27, 2012 at 14:12 Permalink

    Hello, great plugin.

    But how can i implement jQuery custom content scroller in wordpress Responsive theme?

    Thanks in advance for your replay.

    Reply
  3. Éderson
    Posted on June 26, 2012 at 23:33 Permalink

    Hello!.. Great Plugin!.. I have the same problem as Jon. In my site i load the contents inside another div, from hidden div.

    If i put the code for your script on static. This works very well, but if i call the div with the scroller inside another, the script dont work. Any solution for this??

    Reply
    • malihu
      Posted on June 27, 2012 at 00:21 Permalink

      Hi,
      You cannot apply the scrollbars to a hidden div, since hidden elements have zero dimensions. You need to call mCustomScrollbar after your element is fully visible.

      Reply
  4. Jon Kolko
    Posted on June 25, 2012 at 23:38 Permalink

    Hi malihu –

    Great plugin.
    I’m loading ajax content into an unordered list, with each row being a list item; that content is then scrollable with your plugin. It works fine with static content. When I prepend the data, like this:

    setTimeout(function() { $.get("get_content_ajax.php",{query: queryString}, function(data){ $("#scrollingList ul").prepend(data); }); }, 50);

    The entire set of content loads (view source shows all ~200 items) but the script never comes back – the scrollbars and dragger remain hidden. I call $(“#mcs2_container”).mCustomScrollbar(“vertical”,400,”easeOutCirc”,1.05,”fixed”,”yes”,”yes”,10); at the end of my script, as directed.

    I think the data is still being sent via ajax, while the script is re-initializing, and so it’s getting confused. But I won’t have control over the latency of the server.

    Any ideas on how to have the script wait until all data has successfully been loaded?

    Thanks in advance,
    Jon

    Reply
    • malihu
      Posted on June 27, 2012 at 00:16 Permalink

      Hello,
      You need to call mCustomScrollbar function as a callback after your content is loaded. With ajax, you can use the success parameter which indicates that content is fully loaded. See http://api.jquery.com/jQuery.get/ for more info.

      Reply
  5. Sprangskiss
    Posted on June 25, 2012 at 16:29 Permalink

    Hey, great script, thank you

    I have a tiny problem with the dragger not showing up when you first load dynamic content into a frame. If you load the content again, or load some other content into the frame and then go back it works fine. The problem doesnt show again until I restart the browser.. It’s just that first time you load something it doesn’t show up.

    if you could find the time to have a look:
    http://www.sofiaskold.com/nysida/menytest2.php -> goto WORK -> then GUBBE

    Reply
  6. Jauxe
    Posted on June 24, 2012 at 20:18 Permalink

    Hello Malihu,
    how to replace the standard scroll wheel of the browser in full-page with jQuery custom content scroller?
    Thank you,
    Jauxe

    Reply
  7. Anthony
    Posted on June 22, 2012 at 19:06 Permalink

    Hello, great plugin! Will be great to make custom mouse wheel scroll depth var vel = Math.abs(delta*10); on line 102 thanks!

    Reply
    • malihu
      Posted on June 22, 2012 at 22:50 Permalink

      On the new version (I’m currently developing) you’ll be able to set the mousewheel velocity via option parameter. By default it will be “auto” which it’ll auto-adjust itself on safari browser on OSX 😉

      Reply
  8. Nico
    Posted on June 21, 2012 at 17:36 Permalink

    Hey Malihu,

    Great work on this plugin. Thanks for sharing it.

    There are several comments above about javascript errors relating to $dragger position being null.

    It appears that this is caused on window resize events on pages where the plugin script is included, but there are no custom scrollers.

    Changing the last resize function in the plugin to test for the dragger’s presence in the DOM seems to fix the error:

    $(window).resize(function() {
    if(scrollType==”horizontal” && $dragger.length > 0){
    if($dragger.position().left>$dragger_container.width()-$dragger.width()){
    $dragger.css(“left”, $dragger_container.width()-$dragger.width());
    }
    } else if($dragger.length > 0){
    if($dragger.position().top>$dragger_container.height()-$dragger.height()){
    $dragger.css(“top”, $dragger_container.height()-$dragger.height());
    }
    }
    CustomScroller(“resize”);
    });

    Hope this helps anyone that is having this error.

    Cheers!

    Reply
    • malihu
      Posted on June 26, 2012 at 12:06 Permalink

      Great! Thanks for posting the fix 🙂
      New version will have better resize event updates avoiding any js errors.

      Reply
  9. Máté
    Posted on June 20, 2012 at 18:52 Permalink

    Hi,

    I have been testing your plugin very thorough, and though I am amazed with it’s quality and compatible functionality, unfortunately I found a rather annoying bug:

    In latest chrome (19.0.1084.56), when use the zoom function of the browser, the position of the content withit the scrollable area becomes unstable, when it is scolled either by the dragger, or just by using the mousewheel.

    The problem occurs on the demo site as well:

    http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

    I didn’t experience this in other browsers, and I haven’t tried it with earlier versions of chrome, so I suspect the problem might be coming from chrome itself.

    But it may be possible that you have a better idea where to touch just the js code, just by looking at the problem.

    Good luck and thank you in advance,

    Máté

    Reply
    • malihu
      Posted on June 26, 2012 at 11:50 Permalink

      Hello and thanks for pointing this issue.
      Webkit (chrome and safari) zoom with jquery animate is very buggy. On the new version I’m currently working, I’ll address this issue by scrolling content without animation easing on webkit browsers and if the user has zoomed (in or out) the page.
      Thanks again for the feedback 🙂

      Reply
  10. Blaiman
    Posted on June 20, 2012 at 12:32 Permalink

    WOW!! Stunning plugin. Just what I was after!!

    I’m trying to use it HORIZONTALLY in my web page but I have a little problem: I’m designing a liquid dimension markup so it auto-adapts to the browser window size. I need the dragger_container Div to adapt it’s width when the browser size changes (as it does your “Adjustable scroller height with 1/3 range” vertical example). Is that possible? I’ve been trying for weeks without succeed. I’m sure there’s a very simple solution, but I’m very new in web design.

    Thank you in advance.

    Reply
    • Clément
      Posted on June 25, 2012 at 18:55 Permalink

      Hi there,

      I’m having the same issue here. Indeed, my scrolling div is supposed to have a width of 100% (fullscreen in that case).

      Problem is, if the user expand his window and drag the scroll to the right a “white” space will appear. (see here : http://img543.imageshack.us/img543/8541/bugdt.jpg)

      I’ve been messing around with the code but without success. Did you find a solution ?

      Cheers,
      Clément

      Reply
      • Blaiman
        Posted on June 28, 2012 at 11:31 Permalink

        No, not yet. Just waiting for Malihu’s answer.

        Reply
        • Clément
          Posted on July 2, 2012 at 10:55 Permalink

          Thanks man,

          I’ll ask again. Maybe it got lost with the flow of comments.

          Reply
          • malihu
            Posted on July 15, 2012 at 20:29 Permalink

            Please try version 2.0

    • malihu
      Posted on July 15, 2012 at 20:31 Permalink

      Please get version 2.0 as it’s much better with fluid layouts

      Reply
  11. Fiona
    Posted on June 20, 2012 at 00:30 Permalink

    Hello,

    I really liked your scrolls, I was searching for one sleek and elegant scroll box and I found yours…

    Anyway, I tried to customize how I like I did most part but couldn’t solve one thing!

    I would like to use my dragger container as long as my box height size. Which will be 300px, but whatever I did couldn’t find the right place. When I change the sizes scroll button size going to be longer too, can you please tell me what can I do for a longer dragger container line?

    Thanks a lot from now
    Fiona

    Reply
  12. Rad
    Posted on June 19, 2012 at 18:31 Permalink

    I’m looking for a new scrollbar plugin which will be used in many websites I develop, previously I have used FlexCroll.

    Your plugin seems wonderful, however the implementation is too needlessly complicated…

    Why do we need to structure our scrollboxes ourselves? (Why don’t you use jQuery to add these additional divs?)
    Why do we need jQuery UI (200kb. Seriously?)?
    Why must the script be called at the end of the page, and with both inline code and an external sheet?

    The last question is especially annoying for me, as this plugin alone requires 6 HTTP requests. Normally I combine, minify & compress scripts to save a few seconds of loading time but when a script is at the bottom of the page, that is no longer possible. It seems incredibly weird to have an inline script at the bottom of the page that fires on window load… why must it be there if it fires on load?

    Anyway, from the scrollbar plugins I’ve used so far this one seems excellent from your demo page, even in IE… but the setup far this more excessive than any I have come across.

    You should look into optimizing this, reducing the number of prerequisites and hopefully ditch jQuery UI (there may be reasons for using it, I didn’t bother to look).

    There really is a lack of quality custom scrollbar scripts that are easy to implement, cross-browser-compatible, and stable…

    Reply
    • malihu
      Posted on June 23, 2012 at 00:54 Permalink

      Thank you for your feedback!

      The new version will auto-generate all necessary markup.

      jQuery UI is essential as we use its draggable function and easing types (I’ll ditch jquery.easing.1.3.js on next vesrion). You can build your own jQuery UI (http://jqueryui.com/download) to cut down size, although I always prefer loading the complete library from Google CDN (high probability of being cached, so 200kb has zero loading time).

      You can load the script(s) anywhere you want (inside head, body, bottom of page etc.). I always load all my scripts on the bottom as page renders faster.

      Calling the plugin on window load is one way. You can call it on document ready if you have only text inside your scrollers.

      You can place the inline code that calls the plugin function anywhere you want (e.g. inside another .js file or inside the main plugin script). It’s really up to you. You could even copy-paste all the plugins you use in a single .js file. The same can be done with the css file.

      Custom scrollbars plugins are usually not simple to implement because are pretty complicated. They require many events (drag, click, mousedown, mouseup, mousewheel etc.), as well as specific structure (each scroller requires more than 3 wrappers). These kind of plugins basically simulate browser scrollbar functionality, so in the end you just re-program a browser scrollbar.

      I believe the new version will be much easier to implement 🙂 I’ll also update the post with better implementation guides.

      Reply
  13. oottoo
    Posted on June 19, 2012 at 12:50 Permalink

    hello,

    im trying to use lazy load plugin with images inside your scrollbar. Is there an event I can bind in your plugin when I move the scroll?

    regards

    Reply
    • malihu
      Posted on June 26, 2012 at 12:11 Permalink

      Not in the current script. New version will feature user defined callback function(s).

      Reply
  14. Wagner Bazarin
    Posted on June 18, 2012 at 23:06 Permalink

    Malihu, I am using your great plugin on a windows 8 like web site and it is working fine.
    I am having a small problem that I am not able to solve and your help could be very appreciated.
    I have three divs floating and included in the scroll content. The first div has an iframe (running a flash content) and I can roll horizontally the three divs without problems but only on Firefox. When I am running on Chrome or IE8 the div with the iframe flashs beyond the main window (the one I have the three divs). This flash make the rolling process very difficult as the rolling jumps all the time.
    The website is on development but you can see it on http://www.articulate.net.br and clicking on a tile called Hospedagem
    I will continue to find a solution for this problems on the web due to I would not like to quite using your great plugin that is working fine where the iframe is not needed.
    Thank you very much for your time.

    Reply
    • Wagner Bazarin
      Posted on June 19, 2012 at 13:23 Permalink

      For sure I could not find a solution in this case.
      If you folks could help me it would be great.

      Reply
      • Wagner Bazarin
        Posted on June 20, 2012 at 21:29 Permalink

        Unfortunally I have to quite using your great plugin due to the problems running iframes as an element inside the scroll.
        The problem is not with your plugin but related with Chrome and IE8 with iframes due to it happens in other plugins I tested.
        I would be very glad continuing your plugin but I could not find a solution or an workaround.
        I decide to change to another plugin as with that I could masks the problem changing each element without the elegance smooth I could find in your plugin during the transition.
        Thank you for your great job and I will be in touch with your work hoping this problem could be solved one day.

        Reply
        • malihu
          Posted on July 15, 2012 at 20:52 Permalink

          Hello,

          I think this issue happens only on iframes with flash objects that have wmode=”transparent”. This is probably fixed by setting wmode=”window” (if you have access to iframe’s source).

          I’ve made some tests in version 2.0 on chrome with youtube iframes (that don’t have transparent wmode) and it scrolls them smoothly.

          On The new plugin version, setting scrollInertia: 0 will remove any scrolling inertia/easing so you won’t have this “flashing” on scrolling such objects. Other than that there’s not much we can do as it’s a browser vendor and flash plugin related issue.

          Thanks a lot for the feedback

          Reply
  15. DaveBowman
    Posted on June 18, 2012 at 12:40 Permalink

    Extraordinarily brilliant visually! Really, the best I’ve seen.

    But – hardly useful on pages when you want to create scrollers on the fly. Everything visual needs to be done in CSS by hand.

    I can live with generating the supporting html code in a wrapper helper before main plugin call, but specifiyng all the heights and widths and positions… non-productive.
    Have to agree with Dan here.

    Hope it will all be fixed in version 2.0 )) Cheers!

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

      Thanks for your feedback.
      On the new version I’m building, all markup is generated automatically and the plugin css will contain a basic styling for every custom scrollbar. Each scrollbar will also have automatically generated classes based on its index.

      If you have any suggestions in general please let me know 🙂

      Reply
  16. Alistair Wise
    Posted on June 17, 2012 at 15:23 Permalink

    Hi, i have managed to input 2 horizontal scrollbars into one of my pages, but on the same page i also want a vertical scrollbar, i have started implementing it but have just noticed that when you scrolldown the content also scrolls down, rather than going up, so i don’t see the content below, i just see the white above, how can i reverse the flow of the content the other way? Thanks

    Other than that a great product.

    Reply
  17. Aayush Gaur
    Posted on June 14, 2012 at 12:47 Permalink

    Just two words:
    Simply awesome.

    Reply
  18. Tentic
    Posted on June 12, 2012 at 13:49 Permalink

    Hey thx for the great work, i have modified your css so that it work in fullscreen browser (and overwrite the normal page scrolling from the browser) im about to write a hub about it, do you mind that im using your script if i give you credit troughout my hub and readme file, as a easy to use script file so even dummys can use it??

    Reply
    • malihu
      Posted on June 13, 2012 at 02:59 Permalink

      No problem at all. Thank you for your comments 🙂

      Reply
  19. Hughsie
    Posted on June 11, 2012 at 23:02 Permalink

    Hi,
    Just used your scrollbar ‘vertical’ on a project and it works great, thanks.

    I am in the process of doing another site combining your scrollbar with ‘Pikachoose’ carousel. The carousel is working fine but the scroll will not move. Is this a conflict of the 2 javascript files? Any help advice would be appreciated.

    Cheers,
    Hughsie

    Reply
  20. Tim
    Posted on June 7, 2012 at 23:29 Permalink

    OOPS… forgot to include tag for code…

    Great stuff… works a treat… I just have one question… I have several divs inside the scrollbar content, displaying one at a time via click.
    <div id="mcs_container"> <div class="customScrollBox"> <div class="container"> <div class="content"> <div id="page1"></div> <div id="page2" style="display:none"></div> <div id="page3" style="display:none"></div>

    I can move to display pages1,2,3 etc, but how can one reset the the location of the scrollbar and content to 0 (or original start position)..?… Many thanks, muchas gracias.. for excellent scrollbar!…

    Reply
  21. Tim
    Posted on June 7, 2012 at 23:28 Permalink

    Great stuff… works a treat… I just have one question… I have several divs inside the scrollbar content, displaying one at a time via click.

    I can move to display pages1,2,3 etc, but how can one reset the the location of the scrollbar and content to 0 (or original start position)..?… Many thanks, muchas gracias.. for excellent scrollbar!…

    Reply
  22. Donovan
    Posted on June 7, 2012 at 23:25 Permalink

    This plugin is exactly what I needed, thanks a million!
    I have run into a strange glitch. If I use “too many” pictures the slider goes haywire at the end. How many is “too many”? hard to say.

    Here are the links to the files I am working on:
    This slider works great http://blog.dsdsonline.com/Portfolio_one1.html
    this is the same slider, but more pictures. It goes a bit haywire at the end
    http://blog.dsdsonline.com/Portfolio_one.html

    I have cruised over the earlier questions and have not seen this answered. Any help would be awesome!!

    Reply
    • malihu
      Posted on June 8, 2012 at 00:21 Permalink

      Hi,

      This is a known issue.
      There is a bug in jquery.min.js that resets to 0, an animate value greater than 9999 pixels. I checked your link and your content is over 12000 pixels wide (that’s why only the first one, which is about 8500 pixels, works correctly).

      Please check section Scrolling long content in this article to see a quick way to fix it 😉

      Reply
      • donovan
        Posted on June 8, 2012 at 00:27 Permalink

        AWESOME!
        That fixed it. And sorry for not seeing that fix already… with the amount of time I have poured over this page you would think I would have seen it… my brain is turning to mush.

        thanks for the quick reply and the great work!

        Reply
        • malihu
          Posted on June 8, 2012 at 00:31 Permalink

          No problem. Happens to me all the time.
          Thanks for your comments.

          Reply
  23. Matt
    Posted on June 7, 2012 at 17:55 Permalink

    I ran into a bug with the scrolling long content function $.fx.prototype.cur = function(). In some cases with IE 8 and less, it’ll return an invalid value, which causes IE to throw an error and not scroll. I put in a little fix which works for me.

    /* 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 ) );
    var result = typeof r == ‘undefined’ ? 0 : r;

    //Test for NaN
    if(isNaN(result)) result = 0;
    return result;
    }

    Reply
  24. NeutronTon
    Posted on June 5, 2012 at 04:25 Permalink

    great plugin! I’m getting some wiggling/vibrating action of images in scrollbar on IE9 and Chrome on PC, any thoughts on what’s happening?

    Thanks!

    Reply
  25. Mark Pirres
    Posted on June 4, 2012 at 15:54 Permalink

    Hi there

    scrollbar looks great! I can’t really get it to work on my website though. I am a bit new to jquery and I’m still trying to figure out how to customize the scrollbar itself: at the moment the sliding part is too long and thin. Is there any tutorial that shows how to do it? any help would be greatly appreciated!
    regards

    Reply
  26. oottoo
    Posted on June 1, 2012 at 14:50 Permalink

    hello,

    i’m having a problem. I load 3 scollbars at the same window and everything Ok, EXCEPT that one of them, gets the scroll backwords (when I scroll down, “scoll div” will move down also, and not up).

    ANY IDEA?

    Ive tried without, and whith function:
    $.fx.prototype.cur = function(){

    Regards,

    Reply
  27. marlies
    Posted on May 25, 2012 at 01:09 Permalink

    Hi! I used your plugin in this website. It works really well! The only problem I encountered was that the scrolling stammers/hesitates when using the trackpad on my mac and the touchscreen. Is there any way I can fix this? Thanks!!

    Reply
  28. João
    Posted on May 24, 2012 at 18:09 Permalink

    Hi, man, I’m not sure how is the right way to insert this plugin in WordPress.
    it’s the same proccess or there’s other way, specific for wordpress?

    thanks

    Reply
  29. paul
    Posted on May 16, 2012 at 13:50 Permalink

    Hello,

    I have error:

    jquery.mCustomScrollbar.js:352
    Uncaught TypeError: Cannot read property ‘top’ of null

    How fix this?

    Thanx!

    Reply
  30. [map]concepts
    Posted on May 14, 2012 at 19:23 Permalink

    Sorry this the corrected link
    http://map-concepts.com/?p=ref

    Reply

Comments pages: 1 12 13 14 15 16 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