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

Post a comment

Comments pages: 1 55 56 57 58 59 85

  1. Naresh
    Posted on December 18, 2014 at 13:54 Permalink

    Hi malihu,
    It was awesome, working fine thanks for giving this extinction

    but the scroller was moving very slow in safari please update me on this is there any thing i have to do for this.

    Thanks,
    Naresh

    Reply
    • malihu
      Posted on December 18, 2014 at 18:24 Permalink

      Hi Naresh,

      I’m guessing that you’re talking about the mouse-wheel being “slow”, right? Are you using an older version of Safari?

      Reply
  2. Matt B
    Posted on December 16, 2014 at 21:10 Permalink

    Thanks for the great plugin, @malihu! Any idea why position: relative is randomly added as an inline style? The element I want to scroll is position: absolute, but every couple refreshes the layout breaks. I am using <div className="mCustomScrollbar" data-mcs-theme="minimal-dark">

    Reply
    • Matt B
      Posted on December 16, 2014 at 22:43 Permalink

      So, position: absolute !important; fixes the issue, but we have a hard rule to not use !important in our code so I’d still like to understand why the JS is adding inline styles when the stylesheet already has the position: relative declaration.

      Reply
      • malihu
        Posted on December 16, 2014 at 23:07 Permalink

        Hello,

        The only time when the script adds an inline position style (relative) is when using a scrollbar positioned “outside” (like in minimal theme) and the element itself has a static position. If your element already has position: absolute the script should not change it. Do you load your CSS after plugin js file is included?

        Reply
  3. George
    Posted on December 15, 2014 at 16:30 Permalink

    Hey. I’have some problem with this. I use it in my site http://test.sipks.ru/wwwsipks/curses.html. This is the left part of the page and it has position fixed. In Chrome, Safari this plugin works well, but in Mozilla and Internet Explorer this is no scroll. What’is the problem?

    Reply
    • George
      Posted on December 15, 2014 at 16:38 Permalink

      This left div has following css:
      width:250px;
      position:fixed;
      z-index:10 !important;
      background:#fff;
      overflow:auto;
      height:100%;
      padding:50px 0 0 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box; box-sizing: border-box;

      Reply
      • malihu
        Posted on December 16, 2014 at 01:49 Permalink

        I think it has something to do with the 100% height of .filter div while its parent (.container) has height auto. Can you test setting .filter div height to a fixed value (e.g. 600px)?

        Reply
  4. George Perivolarakis
    Posted on December 15, 2014 at 16:02 Permalink

    Hi Manos,

    Thanks for the plugin. Really good with a lot of options!

    I wanted to ask about an issue that I am having with the horizontal scrollbar.

    I added it in a horizontal menu, the width of the menu div is at 140%. What I can’t solve , without using lots of media queries, is how to show all the items of the menu in different screen sizes. In my screen 140% width it’s perfect. But in larger screens this is to large and there is a lot of empty space after the last element, or in smaller screens it’s not enough, many elements are missing.

    Any ideas what am I missing?

    Thanks in advance,

    George

    Reply
    • malihu
      Posted on December 16, 2014 at 01:57 Permalink

      I can’t really say unless I see your page in action. Are you using the autoExpandHorizontalScroll option parameter?

      Reply
      • George Perivolarakis
        Posted on December 16, 2014 at 09:51 Permalink

        Thank you that solved my problem! Many thanks!

        Reply
  5. bosun
    Posted on December 13, 2014 at 11:25 Permalink

    Hi, I like your custom scrollbar, it is best so far. But am having issues with height on my project. I have applied the height parameters yet, during rendering it displays the height briefing then goes back to a small size:

    This is my site link:

    http://rosaworldtravelsconcept.webflow.com/

    Reply
    • bosun
      Posted on December 13, 2014 at 13:39 Permalink

      I have been able to fix it by giving the containers min-height values. Thanks for your wonderful plugin.

      Reply
      • bosun
        Posted on December 15, 2014 at 14:33 Permalink

        Just to inform you of my study so far. Your plugin has just one limitation which doesn’t make it easily useful for responsive web design. Elements in the scroll must have a px width for it work properly or you set a percentage with and assign a max-width and min-width in pixel.

        The performance of the plugin in this scenario mentioned is that it shows flashes the width then goes back to a small size or displays nothing at all. (Am using horizontal scroll here. You can check my earlier link to see the parameters I used)

        It will be nice if elements can just by assigned percentage or fluid values. Loving plugin.

        Reply
        • malihu
          Posted on December 16, 2014 at 01:54 Permalink

          Thanks for the feedback. Can you make a test page so I can see exactly the scenario?

          Reply
  6. Alexander
    Posted on December 13, 2014 at 01:10 Permalink

    Hi! You have really good plugin, I like it.
    But it doesn’t work on laptops with touchscreen.

    Reply
    • malihu
      Posted on December 13, 2014 at 01:50 Permalink

      Hi,

      Can you provide more info? Which laptop, OS, version?

      Reply
      • Alexander
        Posted on December 13, 2014 at 17:06 Permalink

        I’ve tested on HP laptop don’t know the model, Windows 8.1, IE and FF latest versions. Mouse wheel and touch pad is working, but touchscreen is not.
        I think it will be the same for all laptops with touchscreen.

        Reply
        • malihu
          Posted on December 13, 2014 at 17:22 Permalink

          I see. So you cannot touch-drag neither content or scrollbar? Or one of them does work?

          Reply
          • Joeri de Man
            Posted on December 15, 2014 at 03:35 Permalink

            I can confirm this problem. Touching the actual scrollbar works, swiping the field does not.

            That problem goes for windows 8.1 professional and for mobile.
            Tested it with a surface pro and a nokia 520.

            Browser is IE

        • malihu
          Posted on December 17, 2014 at 19:15 Permalink

          I’ll fix this in the next update (this was working but some modifications I did after version 3.0.4 caused this issue).

          Edit: Fixed in version 3.0.7

          Reply
  7. chetena
    Posted on December 12, 2014 at 16:47 Permalink

    I have been using this scroller since last 4 years in my various projects.
    In love with this 🙂
    Thank you guys for this awesome scroller !!
    Couldn’t find a better match yet.

    Reply
    • malihu
      Posted on December 12, 2014 at 17:07 Permalink

      You’re welcome! Thanks for your comment 🙂

      Reply
  8. Ric
    Posted on December 12, 2014 at 10:19 Permalink

    First of all, thanks for this great plugin! I have a question. I hope you can help me.

    I am using this plugin with an AJAX-based form that has multiple sections. At the end of each section, there is a Next button that takes users to the next section without loading the page.

    When I use a browser’s default scrollbar, upon clicking the Next button, it takes me to the next section and scrolls right to the top of the content area. However when I switch to this plugin, the content does not seem to scroll to the top. It only scrolls about half-way or even less. I am not understanding this behaviour. Is there anything I can do in the settings that will allow the page to scroll right to the top? Are you able to suggest something?

    This is my current settings:
    $('.content ').mCustomScrollbar({ theme:"mytheme", scrollButtons:{ enable:false }, scrollInertia:0 });

    And this is a custom code that triggers when the Next buttons is clicked:
    ..... ..... $('.content').animate({ scrollTop: this.top },1000);

    I’m lost of ideas. Thanks for your help.

    Reply
    • malihu
      Posted on December 12, 2014 at 14:21 Permalink

      Hello,

      jQuery’s scrollTop works only with browser’s native scrollbar.
      You’ll need to use plugin’s scrollTo method for the custom scrollbar (method info and examples).

      Reply
      • Ric
        Posted on December 12, 2014 at 16:16 Permalink

        Perfect! That works. Thank you so much.

        The other thing I would like to know is when I enable scrollInertia, the scrollTo method does not seem to work well. Is there a way to make it work with scrollInertia enabled?

        Reply
        • malihu
          Posted on December 12, 2014 at 16:24 Permalink

          Can you explain the issue you’re having with more details (the problem, your code etc.)?

          Reply
          • Ric
            Posted on December 19, 2014 at 19:57 Permalink

            Well basically I’ve now got scrollTo method that seems to work well.

            I have the following code in one file. If I add ‘scrollInertia:0’, the scrollTop does not work very well.
            $('.content ').mCustomScrollbar({ theme:"mytheme", scrollButtons:{ enable:false } });

            … and this on the other file
            $('.content').mCustomScrollbar("scrollTo","top");

  9. rafael topasi
    Posted on December 12, 2014 at 08:55 Permalink

    Hi Sir,

    Again, I would to ask, I’ve created a dummy page with full body scrollbar and with a long text content, and it works perfectly as I desire, but when I checkout to the tablet or smartphones it seems a bit laggy or too slow to scroll what should I do? in order to increase the speed into the mobile devices?

    Reply
    • malihu
      Posted on December 12, 2014 at 14:24 Permalink

      Can you send me a link?

      Reply
  10. Guillaume
    Posted on December 10, 2014 at 19:49 Permalink

    Hi there ! Thanks for this plugin, it’s really nice.

    How shall I keep the default browser speed of the scroll ? Actually it’s smooth and it’s nice, but I prefer the default speed.

    Thanks !

    Reply
    • malihu
      Posted on December 10, 2014 at 19:58 Permalink

      Set the scrollInertia option parameter to zero:
      $(selector).mCustomScrollbar({ scrollInertia:0 });

      Reply
      • Guillaume
        Posted on December 10, 2014 at 22:11 Permalink

        Cheers mate

        Reply
  11. Bill Kortsimelidis
    Posted on December 10, 2014 at 18:55 Permalink

    Hello thanks for this great plugin.

    Is there a way to init it after content has reached a certain height?

    Reply
    • Bill Kortsimelidis
      Posted on December 10, 2014 at 19:13 Permalink

      Oh it works with a simple max-height.

      Thanks again.

      Reply
  12. rafael topasi
    Posted on December 10, 2014 at 10:57 Permalink

    hi, I use this plug-in mCustomScrollbar but I have one problem I set my html, body to 100% height and my container also and its work perfectly but when I use this plug-in the 100% height not working what should I do? I think customScrollbar not support 100% height

    Reply
    • malihu
      Posted on December 10, 2014 at 11:01 Permalink

      It should work. You can check the full_page_demo.html included in the archive which works on 100% body/html height. I don’t know your markup/layout so I can’t really help unless you send me a link.

      Reply
      • rafael topasi
        Posted on December 10, 2014 at 11:50 Permalink

        Sir, I dont know why 100% height not working I have sample page check this out:

        topasi.freevar.com

        Reply
      • rafael topasi
        Posted on December 10, 2014 at 11:54 Permalink

        Sir, I dont know why 100% height not working I’m using firefox, chrome & ie but the same result at first it loads but when the page done loading it disappears..

        thanks for replying sir..

        I have created a dummy page topasi.freevar.com

        Reply
        • rafael topasi
          Posted on December 10, 2014 at 12:09 Permalink

          Its not displaying because 100% height not working but if I remove the plug-in it works..

          here’s the markup sir..

          SAMPLE TASK

          html, body {
          width:100%;
          height:100%;
          padding:0;
          margin:0;
          }
          .container {
          width:100%;
          height:100%;
          background:red;
          }
          .div1 {
          width:100%;
          height:100%;
          background:green;
          }
          .div2 {
          width:100%;
          height:100%;
          background:blue;
          }

          (function($){
          $(window).load(function(){

          $(‘body’).mCustomScrollbar({
          theme:’minimal’
          });

          });
          })(jQuery);

          Reply
        • malihu
          Posted on December 10, 2014 at 19:28 Permalink

          In order for the custom scrollbar to work on divs with non-fixed height value, there must be some content inside them. Your div elements are currently empty (there’s no content). Just add some content and when it becomes longer than the viewport you’ll see the scrollbar.

          Reply
  13. Craig
    Posted on December 9, 2014 at 13:54 Permalink

    Thank you for a great plugin with well explained tutorials and great demos. It’s looking and working great.

    The site I’m building has variable width images and the slider itself is fluid to the browser window. One thing I can’t seem to get right is programmatically setting the ‘snapAmount’. It’s easy enough when all the images are the same width, but is proving beyond my small skillset in this flexible configuration.

    Please consider adding such an example to your documentation or mayeb you can point me in the right direction. I’m pretty sure with the number of ‘responsive’ sites on the increase, I won’t be the only one looking.

    Once again thanks for a great plugin which has made my life ALOT easier 🙂

    Reply
    • malihu
      Posted on December 10, 2014 at 01:30 Permalink

      Thanks for the comments and feedback 🙂

      You’re right and I’m trying to find time to publish mini guides and tutorials for the plugin and expand its documentation.

      As for your problem…
      You can access and modify the snap amount of your scrollbar after initialization via jquery.
      You can get its value like this:
      $(selector).data("mCS").opt.snapAmount
      and you can set its value like this:
      $(selector).data("mCS").opt.snapAmount=100

      $(selector).data("mCS").opt holds plugin’s instance options and many of them can be changed on-the-fly.

      Reply
      • Craig
        Posted on December 10, 2014 at 08:30 Permalink

        Great! That definitely changes the way I was trying to go about it, gives me a good way of altering the snap amount. Everything else I tried changed the amount before initialization.

        So I reckon if I always mark the ‘div’ or ‘li’ on the far left, then use adjacent siblings and assign snapAmount when scroll buttons are clicked, I should be able to achieve the desired result.

        I’m not very skilled at this stuff, but in my head it makes sense. I’ll let you know how I go. 🙂

        Thank you very much again.

        Reply
        • Craig
          Posted on December 11, 2014 at 14:21 Permalink

          Damn this is proving to beyond my skills. 🙁

          I can get it to snap according to the width of the prev or next sibling. But that fails if the user has already scrolled partially, as it then continues to snap partially.

          Anyway thanks for the help, for now I’m going to leave this functionality out, at least until I teach myself more jquery/javascript.

          Thanks again 🙂

          Reply
  14. Atiyab B
    Posted on December 9, 2014 at 09:26 Permalink

    Hi Admin,

    I need J-query version of ( 1.10.3.js ) with your compatible scroll bar plugin.

    Please Help me !!

    Thanks

    Reply
    • malihu
      Posted on December 9, 2014 at 12:17 Permalink

      Hi,
      I don’t really understand what you need and there’s no jQuery version 1.10.3

      Reply
  15. Noel S
    Posted on December 9, 2014 at 09:12 Permalink

    Hi Malihu,

    Thanks for this great plugin. Works great for me. 🙂

    Could you help me out with a scenario.

    In my project, the scroll bar autofocuses the elements in my parent container div when navigated using the keyboard ‘tab’ key. when I have a div(with scroll bar) popping up from the parent container, having a higher z index the scrollbar works great in the popped div.
    But on navigating through the popped up div using the tab key, the autoscrollfocus does not happen though i can use the ‘up’ and ‘down’ keys in keyboard to manually focus them.

    Could autofocus be brought in the popped div?

    Thanks,
    Noel

    Reply
    • malihu
      Posted on December 9, 2014 at 12:22 Permalink

      Which elements (e.g. links)?
      Maybe you need to add a tabindex attribute on them… or perhaps you could use the autoScrollOnFocus option parameter.

      Reply
  16. Atiyab Butt
    Posted on December 8, 2014 at 13:22 Permalink

    Hello Admin,

    i want to know that when i use this plugin in document ready its worked but in same side when i use this in AJAX call back function then its disable the scroll plugin.

    Kindly help me its very urgent for me.

    Thanks 🙂

    Reply
    • malihu
      Posted on December 8, 2014 at 13:30 Permalink

      You’re probably loading content directly inside your element which removes scrollbar markup. If this is the case, you need to load new content inside .mCSB_container div. For example:
      $(.content .mCSB_container).html("new content");

      Reply
  17. Sathyananth
    Posted on December 5, 2014 at 16:39 Permalink

    Hi,
    First i want to thank you for this custom scrollbar.

    I have a situation like i want the scrollbar to be shown all the time.
    Even when content size is less for scrolling, there should be scroll bar with totalscroll() and totalscrollback()
    functionality.
    Is that possible??

    Thank you,
    Sathyananth.

    Reply
    • malihu
      Posted on December 5, 2014 at 18:23 Permalink

      Sure. Set autoHideScrollbar option parameter to 2. For example:
      $(selector).mCustomScrollbar({ autoHideScrollbar: 2, callbacks:{ /* callbacks */ } });

      Reply
  18. Ciro
    Posted on December 4, 2014 at 13:42 Permalink

    Hello!

    I’m currently integrating custom scrollbar into a GNU and free project.

    I’m fascinated with custom scrollbar.

    I would like to know how can i get the top position of a div that is inside the scrolled content.

    I try to catch it with $(‘.mydiv’).offset().top but i get cero value.

    I would like to fadein / fadeout the divs when you scroll to them!

    This is my code:

    .... $page.mCustomScrollbar({horizontalScroll:false, theme:"light-thick", advanced:{ updateOnContentResize: true }, scrollButtons:{enable:false}, scrollInertia:1500, autoHideScrollbar:false ,callbacks:{ whileScrolling:function(){ myCustomFn(this); } } }); ... function myCustomFn(el){ console.log(el.mcs.top); var adivs = $('body').find( '.a' ); adivs.each( function() { var adiv = jQuery( this ); console.log(adiv.offset().top); }); }

    many thanks
    i will notice you when i publish my project!

    Ciro

    Reply
    • Ciro
      Posted on December 4, 2014 at 13:54 Permalink

      Sorry

      My “.a” had a display:none CSS so the offtset().top gived cero value…

      So… i’m going to think how can i do that:

      “showing and hidding the elements when the begin to be on the visible screen…!

      🙂

      Reply
      • Ciro
        Posted on December 4, 2014 at 15:15 Permalink

        OK now it´s working.

        i’m showing divs with opacity:0 when they become ª”visible” on the window screen:

        ..$page.mCustomScrollbar({ horizontalScroll:false, theme:"light-thick", advanced:{ updateOnContentResize: true }, scrollButtons:{enable:false}, scrollInertia:1500, autoHideScrollbar:false, callbacks:{ whileScrolling:function(){ myCustomFn(this);}} }); function myCustomFn(el){ var adivs = $('body').find( '.a' ); adivs.each( function() { var adiv = jQuery( this ); if( parseInt(adiv.offset().top) < (parseInt($(window).height()))) { adiv.fadeTo(1200, 1); } else { adiv.css({ opacity: 0}); } }); return false; }

        It works fine except that the elements don´t get another time the opcity:0 when they goes out of screen..

        so then line adiv.css({ opacity: 0}); is not working i think.

        ¿Any idea?

        Reply
    • malihu
      Posted on December 4, 2014 at 21:29 Permalink

      Hi,

      If you want to target element(s) that are within the scrollable viewport you can try using plugin’s “:mcsInView” jquery expression (you need plugin version 3.0.6 for this).
      For example, in your code you could do:
      // ... callbacks:{ whileScrolling:function(){ $(".a").each(function(){ myCustomFn($(this)); }); }} // ... function myCustomFn(el){ if(el.is(":mcsInView")){ el.css({ opacity: 1}); }else{ el.css({ opacity: 0}); } }

      And you could animate the opacity via css transition:
      .a{ transition: opacity .5s ease-out; }

      Let me know if this helps

      Reply
      • Ciro
        Posted on December 5, 2014 at 13:42 Permalink

        Umm that option is great! but i am getting something like a loop….

        My application has a lot of sripts, so it´s possible that is not a custom scrollbar problem.

        So i’m going to test it on a clean page with only jquery & custom and i will share with you the link and the results, today or on the weekend.

        :)))) many thanks!!!!

        Reply
      • Ciro
        Posted on December 5, 2014 at 15:01 Permalink

        hello, i’m here again

        i have uploaded a simple example of what i would like to do in a clean custom bar installation based on your examples:

        Example

        I want to do two similar things:

        1) Show and hide the logo when you scroll to the “Show / hide logo when you get here” h1 (aprox). the logo has a class named “logopq” and an initial style=”opacity=0″

        2) Show and hide the p elements with cass=”a” whe they become on screen. elements with a class are with opacity=0 and the begin.

        Here is my code:

        (function($){ $(window).load(function(){ $("#content-1").mCustomScrollbar({ theme:"minimal", callbacks:{ whileScrolling:function(){ myCustomFn(this);}} }); function myCustomFn(el){ if( el.mcs.top < -370) $('.logopq').fadeTo(2200, 1); else $('.logopq').css({ opacity: 0}); var adivs = $('body').find( '.a' ); adivs.each( function() { var adiv = jQuery( this ); if( parseInt(adiv.offset().top) < (parseInt($(window).height()))) { adiv.fadeTo(5200, 1); } else { adiv.css({ opacity: 0}); } }); return false; } }); })(jQuery);

        So:

        1) the option 1 works fine when you scroll down, the logo appears, but then when you scroll to the top, the logo disapears (good) but then appears at the end of the scroll. After this the behavior becames strange.

        2) in the second option the behavior is similar. the p elements becomes visibles in a nice way, but they don´t get transparents another time. if you look to the elements with chrome inspector, there is there something like a loop (on the opcity element style).

        PD: i love custom scrollbar, one of the best jQuery plugins i have ever use!

        Ciro

        Reply
        • malihu
          Posted on December 5, 2014 at 18:08 Permalink

          Both of these issues are due to not stopping opacity animations.

          When you change the opacity, the previous fade animation is still in queue. You need to use jquery’s stop() on the animated elements so any animations are stopped before applying a new one:
          function myCustomFn(el){ if( el.mcs.top < -370) $('.logopq').stop().fadeTo(2200, 1); else $('.logopq').stop().css({ opacity: 0}); var adivs = $('body').find( '.a' ); adivs.each( function() { var adiv = jQuery( this ); if( parseInt(adiv.offset().top) < (parseInt($(window).height()))) { adiv.stop().fadeTo(5200, 1); } else { adiv.stop().css({ opacity: 0}); } }); return false; }

          According to how you want the animation to work, you may want to use stop(true).
          More info here: http://api.jquery.com/stop/

          Different solution using transitions

          Remove inline style from logo and add the following to your style tag:
          .logopq{ opacity:0; transition: opacity 1s ease-out; } .a{ opacity:0; transition: opacity 3s ease-out; }

          Switch opacity without fadeTo() or stop() in myCustomFn:
          function myCustomFn(el){ if( el.mcs.top < -370) $('.logopq').css({ opacity: 1}); else $('.logopq').css({ opacity: 0}); var adivs = $('body').find( '.a' ); adivs.each( function() { var adiv = jQuery( this ); if( parseInt(adiv.offset().top) < (parseInt($(window).height()))) { adiv.css({ opacity: 1}); } else { adiv.css({ opacity: 0}); } }); return false; }

          Reply
          • Ciro
            Posted on December 6, 2014 at 20:31 Permalink

            wow
            wow
            wow
            works perfect!!!!!
            i will notice you when the project become published!!!

            thanks a lot!!
            great!
            c

  19. Martino
    Posted on December 4, 2014 at 11:54 Permalink

    Very beautiful plugin, thanks

    Reply
  20. Pablo Jiménez
    Posted on December 3, 2014 at 23:45 Permalink

    Hello, first thanks for your work 😉

    Now I have a problem using Twitter Widget inside of a DIV with custom scrollbar, seems like the content in charged on the iframe and then dissapear when scrollbar appear, if I delete scroll.js the widget works property, I’m out of ideas, any suggestion?.

    Sorry for my english xD, greetings from Chile

    index
    <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script>window.twttr = (function (d, s, id) { var t, js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src= "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } }); }(document, "script", "twitter-wjs"));</script> <script type="text/javascript" src="wp-content/themes/utopian/scroll/jquery.mCustomScrollbar.min.js"></script> <script type="text/javascript" src="wp-content/themes/utopian/scroll/jquery.mousewheel.min.js"></script> <link href="http://localhost/utopian/wp-content/themes/utopian/scroll/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="wp-content/themes/utopian/js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript" src="wp-content/themes/utopian/jcarousel/lib/jquery.jcarousel.js"></script> <link rel="stylesheet" type="text/css" href="http://localhost/utopian/wp-content/themes/utopian/jcarousel/skins/tango/skin.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/utopian/wp-content/themes/utopian/form.css"/> <link rel="shortcut icon" href="http://localhost/utopian/wp-content/themes/utopian/images/favicon.png" type="image/x-icon" /> <link rel="stylesheet" type="text/css" media="all" href="http://localhost/utopian/wp-content/themes/utopian/style2.css" /> <link rel="stylesheet" type="text/css" media="all" href="http://localhost/utopian/wp-content/themes/utopian/style.css" /> <!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="http://localhost/utopian/wp-content/themes/utopian/ie.css" /><![endif]--> <meta name='robots' content='noindex,follow' /> <link rel="alternate" type="application/rss+xml" title="Utopian &raquo; Feed" href="http://localhost/utopian/?feed=rss2" /> <link rel="alternate" type="application/rss+xml" title="Utopian &raquo; RSS de los comentarios" href="http://localhost/utopian/?feed=comments-rss2" /> <script type='text/javascript' src='http://localhost/utopian/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script> <script type='text/javascript' src='http://localhost/utopian/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script> <script type='text/javascript' src='http://localhost/utopian/wp-content/themes/utopian/js/jquery.cycle.all.min.js?ver=4.0'></script> <script type='text/javascript' src='http://localhost/utopian/wp-content/themes/utopian/js/jquery.cookie.js?ver=4.0'></script> <script type='text/javascript' src='http://localhost/utopian/wp-content/themes/utopian/js/script.js?ver=4.0'></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/utopian/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/utopian/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress 4.0" /> <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style> </head> <body > <!--[if gte IE 9]> <style type="text/css"> .gradient { filter: none; } </style> <![endif]--> <div class="site scroll gradient"> <div class="wrapper"> <div class="header clear"> <div class="logo"> <a href="http://localhost/utopian"><img src="http://localhost/utopian/wp-content/themes/utopian/images/logo.png" alt="Utopian"/></a> </div> <div class="nav"><ul id="dd" class="dd"><li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-10"><a href="http://localhost/utopian/">Inicio</a></li> <li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9"><a href="http://localhost/utopian/?page_id=4">Tickets</a></li> <li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="http://localhost/utopian/?page_id=6">Lugar</a></li> <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://localhost/utopian/?page_id=12">Line Up</a></li> <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://localhost/utopian/?page_id=14">Contacto</a></li> </ul></div> </div> <!-- Container --> <div id="container" class="clear"> <!-- Content --> <div id="content" class="move pos"> <script src="wp-content/themes/utopian/js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript" src="wp-content/themes/utopian/jcarousel/lib/jquery.jcarousel.js"></script> <link rel="stylesheet" type="text/css" href="http://localhost/utopian/wp-content/themes/utopian/jcarousel/skins/tango/skin.css"/> <script type="text/javascript" src="wp-content/themes/utopian/scroll/jquery.mCustomScrollbar.min.js"></script> <script type="text/javascript" src="wp-content/themes/utopian/scroll/scroll.js"></script> <link href="http://localhost/utopian/wp-content/themes/utopian/scroll/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" media="all" href="http://localhost/utopian/wp-content/themes/utopian/style.css" /> <div class="hashtag"><a class="twitter-timeline overall" href="https://twitter.com/hashtag/skate" data-widget-id="540245695371157504" data-chrome="nofooter noborders transparent" height="600px" width="500px" data-theme="dark">Tweets sobre #skate</a></div> <!-- /Content --> </div> </div> <!-- /Container --> <div class="foot"> <div class="f1 pos">made with ♥ - 2015</div> <div class="f2 pos"><div class="fb anim pos"></div><div class="tw anim pos"></div></div> </div><!--/FOOT PARENT--> </body> </html> </div>

    scroll.js
    (function($){ $(window).load(function(){ $(".scroll").mCustomScrollbar(); }); })(jQuery);

    CSS
    .hashtag{ width:100%; height:100%; z-index:1000; background-color:#9FF;position:absolute; top:0; left:0;} .overall{z-index:20000 !important; width:600px !important; height:600px !important; background-color:#F69 !important; opacity:.5;}

    P.D: I’m using 3.0.6 Version.

    Reply
  21. Mark Sisom
    Posted on December 2, 2014 at 23:12 Permalink

    Hello Malihu,

    I was wondering if it’s possible to integrate this scrollbar code within an installed WordPress plugin? I am designing site for a client and have customized a Facebook feed into their footer: http://printedpixel.com/home/ (see FBook feed in footer) .. HOWEVER, the customer hates the scrollbar, but that plugin offers no option to modify the scrollbar and I can’t find anywhere in the plugin’s CSS file to customize.

    That said, I’d love to find a way to integrate your code into that plugin’s CSS to change the look of the scroll bar. … Is that possible? If so, how would I go about it?

    Any help would be GREATLY appreciated! Thanks

    Reply
    • malihu
      Posted on December 3, 2014 at 00:11 Permalink

      You don’t have to mess with the WordPress plugin at all.

      Include jquery.mCustomScrollbar.css and jquery.mCustomScrollbar.concat.min.js as per instructions in your theme (e.g. in header.php) and simply add a script that calls mCustomScrollbar on the fb feed element (in your case: “#cff”).

      For example:
      <script> (function($){ $(window).load(function(){ $("#cff").mCustomScrollbar({ theme:"light-2" }); }); })(jQuery); </script>

      Reply
      • Mark Sisom
        Posted on December 3, 2014 at 09:47 Permalink

        malihu, thanks for your response!

        Ok, so I have this in my header:

        …….. However, , I can’t figure out exactly where to place that script. I tried everywhere I thought it mades sense.

        Was I supposed to change the “(“#cff”)” to point to a specific URL?

        That said, if you don’t mind, would you be able to clarify more specifically where I place that script code? Would be GREATLY appreciated! Thanks in advance. Sorry to bother you.

        ~ Mark

        Reply
        • Mark Sisom
          Posted on December 3, 2014 at 09:50 Permalink

          My bad, I forgot to block quote the header code I meant to paste:

          <link rel="stylesheet" href="http://printedpixel.com/home/wp-content/plugins/custom-facebook-feed/css/jquery.mCustomScrollbar.css" /> <script src="http://printedpixel.com/home/wp-content/plugins/custom-facebook-feed/js/jquery.mCustomScrollbar.concat.min.js"></script> <?php wp_head(); ?> </head>

          Reply
          • malihu
            Posted on December 3, 2014 at 09:56 Permalink

            Ok. Place the script below <?php wp_head(); ?>

        • malihu
          Posted on December 3, 2014 at 09:54 Permalink

          You code got stripped in the comment (use the code tag to post code).

          You don’t need to change #cff. “cff” is the fb feed element id.

          Just place the script in your head tag in header.php or in the footer.php of your theme.

          Let me know if you need further assistance.

          Reply
        • malihu
          Posted on December 3, 2014 at 10:00 Permalink

          Forget that! I just saw that you load jquery in your body tag. Place:
          <link rel="stylesheet" href="http://printedpixel.com/home/wp-content/plugins/custom-facebook-feed/css/jquery.mCustomScrollbar.css" /> <script src="http://printedpixel.com/home/wp-content/plugins/custom-facebook-feed/js/jquery.mCustomScrollbar.concat.min.js"></script> <script> (function($){ $(window).load(function(){ $("#cff").mCustomScrollbar({ theme:"light-2" }); }); })(jQuery); </script>
          in your footer.php just before the closing body tag.

          Reply
          • Mark Sisom
            Posted on December 3, 2014 at 12:04 Permalink

            Wow, PERFECT! It worked! Thank you SOO much!!

            I now have your site here bookmarked for further resource and will be checking out your other stuff. You earned a new fan. Thanks again!

  22. Vedran
    Posted on December 2, 2014 at 02:47 Permalink

    Hi, I’m trying something that doesn’t seem to work:
    When page loads, I attach the scroller to all elements of one class. But, I add additional elements of the same class through $.ajax call and that doesn’t work.

    I tried calling $(“.content-row”).mCustomScrollbar(); again, but it didn’t fix.
    I also tried “update” and it didn’t work, and “destroy” method prior to fetching new objects, also didn’t work. I’m out of ideas/options…

    Reply
    • malihu
      Posted on December 2, 2014 at 03:26 Permalink

      Hello,

      The easiest way is to set live option to true/”on” like this:
      $(".content-row").mCustomScrollbar({ live: "on" });

      If you want to disable this option at any point you can do $(".content-row").mCustomScrollbar({ live: "off" });

      Destroy method should work too (e.g. init > destroy > add element > init) but the above is much simpler.

      Reply
      • Vedran
        Posted on December 3, 2014 at 21:46 Permalink

        Hi, thanks, but I had a problem elsewhere that crashed javascript execution, thanks for suggestion, though.

        Reply
  23. Manish
    Posted on December 1, 2014 at 16:07 Permalink

    Hi Malihu,

    Thanks in advance! When i try to integrate your plugin in jQuery datatable, it working fine in vertical format, but in horizontal format it’s not working correctly, Sometimes it working but unfortunately table content is scroll, table header is header is not scroll..

    data table link(default scroll is working):
    http://www.datatables.net/examples/basic_init/scroll_xy.html

    jsfiddle link (horizontal scroll is not working correctly):
    http://jsfiddle.net/sy78qnm4/2/

    Thanks

    Reply
  24. Raphael
    Posted on December 1, 2014 at 04:21 Permalink

    Works great in nearly* all Browsers. Thank you!

    *Only in the IE-Simulation I have a problem. On my site see “my” – styled scrollbar and additionally the vertical and a horizontal scrollbar of the IE.

    Does anybody have the same experience? Or is it only a problem of the simulation? Here the URL of the project http://www.raphael-bolius.com/web/denkmaterial/

    Would be great if anybody could tell me, how to fix the IE-Bug.

    Thank you!
    Raphael

    Reply
    • malihu
      Posted on December 1, 2014 at 04:39 Permalink

      I think you should remove overflow: scroll; from your CSS and change it to either auto or hidden.

      overflow: scroll; means always show browser’s native scrollbar.

      Reply
  25. Cesar
    Posted on November 30, 2014 at 21:07 Permalink

    Hello, thanks for creating this plugin, it’s really useful.
    I ‘m having a problem on touch devices (ios7), the thing is that the scroll is not working. Is there any solution for this?. Thanks.

    Reply
    • malihu
      Posted on November 30, 2014 at 21:27 Permalink

      Hello,

      Can you explain a bit more about the problem? The plugin is tested on iOS and it works as expected. Are you using an older version?

      Reply
  26. Michael Bryzgalov
    Posted on November 30, 2014 at 18:57 Permalink

    The test of mCustomScrollbar for Opera 12.17 (not WebKit engine: native Opera) shows that scrolling by mouse wheel is very slow. This fact is detected from version 3.0.5. I found a normal scrolling by mouse wheel in mCustomScrollbar 3.0.3!

    Reply
    • malihu
      Posted on November 30, 2014 at 19:20 Permalink

      Version 3.0.3 mouse-wheel will be too fast on some other OS/input/browser (e.g. OSX trackpad).
      Version 3.0.4 (or greater) has the correct (non browser specific) delta values.

      All mouse-wheel values are (and should) generated by jquery mousewheel plugin which normalizes mouse-wheel for all browsers and OS.

      An older version of mousewheel plugin along with scrollbar version 3.0.5 would probably work well with Opera 12.

      In any case, if you want to support some specific/legacy browser which seems to have issues with mouse-wheel you could try changing the values of some mouse-wheel specific options like scrollAmount and/or deltaFactor.

      These changes should be made only when the target browser is detected (via some js condition), otherwise one browser might work well and another one might not.

      Reply
  27. Shuvo
    Posted on November 29, 2014 at 22:54 Permalink

    how to enable scroll on selection?
    I mean If I want to select all text/content of a page then the scrollbar does not move, How do I enable scrolling when I’m selecting text ?

    Reply
    • malihu
      Posted on November 30, 2014 at 05:47 Permalink

      Use latest (3.0.6) version.

      Reply
      • Shuvo
        Posted on December 1, 2014 at 23:31 Permalink

        Thanks malihu, You plugin is awesome 🙂 Keep up the great work.

        Reply
  28. mohsen
    Posted on November 29, 2014 at 14:20 Permalink

    hi, i want to get the value of the scroll for auto load more data from mysql,
    how can i get the value !?

    Reply
    • malihu
      Posted on November 29, 2014 at 21:33 Permalink

      You can use plugin’s callback function onTotalScroll to load more content when scrolling has reached the bottom (or right). For example:
      $(selector).mCustomScrollbar({ callbacks:{ onTotalScroll:function(){ /* load data */ } } });

      You can also get the top value for instance, within any callback function via the this.mcs.top js object, e.g.:
      $(selector).mCustomScrollbar({ callbacks:{ whileScrolling:function(){ console.log( this.mcs.top ); } } });

      For more info see User-defined callbacks and Configuration

      Reply
  29. cyndy
    Posted on November 28, 2014 at 16:56 Permalink

    Hi, ccs of plugins(jquery.mCustomScrollbar.css), overwrites the ccs my WebSite, why this happens?

    Reply
    • malihu
      Posted on November 28, 2014 at 17:38 Permalink

      jquery.mCustomScrollbar.css uses classes with special prefix. What gets overwritten?

      Reply
      • cyndy
        Posted on December 1, 2014 at 18:20 Permalink

        Solved !! but does not look good in Chrome 🙁

        Reply
        • malihu
          Posted on December 1, 2014 at 18:23 Permalink

          I need more info to be able to help. What does not look good in Chrome?

          Reply
          • cyndy
            Posted on December 1, 2014 at 18:27 Permalink

            Apparently does not recognize the height of my div container.

          • cyndy
            Posted on December 1, 2014 at 21:38 Permalink

            I can send you an email explaining the problem
            ?

        • malihu
          Posted on December 1, 2014 at 21:39 Permalink

          Sure

          Reply
          • cyndy
            Posted on December 1, 2014 at 23:07 Permalink

            Sent mail! hope you can help me.
            Thank you !!

          • Bosun Odeyemi
            Posted on December 13, 2014 at 12:12 Permalink

            I’m experiencing same problem too. I have posted a comment before I saw this user’s issue and thought to drop my also again: This is the link to my site:

            http://rosaworldtravelsconcept.webflow.com/

  30. Gerardo
    Posted on November 27, 2014 at 19:06 Permalink

    Hello, Is it possible to put 2 colors on rail, one before of dragger and one after? Thanks

    Reply
    • malihu
      Posted on November 28, 2014 at 18:26 Permalink

      Probably 🙂

      You could set a 2 color background image on the dragger rail and change its css position with whileScrolling callback function. At the moment I don’t have time to create such demo but the idea would be this (more or less).

      Reply
    • malihu
      Posted on November 28, 2014 at 19:09 Permalink

      Vertical scrollbar example (pure css – no images):

      Assuming your element with the scrollbar has id “content-1”.

      1. Add the CSS:
      #content-1 .mCSB_draggerRail{ position: relative; background-color: #a53434; /* color above */ } #content-1 .mCSB_draggerRail_bg{ position: absolute; width: auto; height: auto; top: 0; right: 0; bottom: 0; left: 0; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; background-color: #4d8543; /* color below */ }

      2. Initialize plugin:
      $("#content-1").mCustomScrollbar({ callbacks:{ onInit:function(){ var rail=$(this).find(".mCSB_draggerRail"); rail.append("<div class='mCSB_draggerRail_bg' />") }, whileScrolling:function(){ var bg=$(this).find(".mCSB_draggerRail_bg"); bg.css("top",this.mcs.draggerTop); } } });

      Reply
      • Gerardo
        Posted on December 12, 2014 at 21:31 Permalink

        Thanks, it’s, WoW this plugin is incredible, yeah thank you so much,

        Reply

Comments pages: 1 55 56 57 58 59 85

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