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="http://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.
http://opensource.org/licenses/MIT

Pages: 1 2 3 4


5,493 Comments

Post a comment

Comments pages: 1 70 71 72 73 74 81

  1. Raf Goesmann
    Posted on December 22, 2015 at 23:19 Permalink

    Hello malihu,

    Thank you very much for this awesome plugin, it really makes scrollbars look so much better. I have been having some problems with it though. I am making a chat application so I want to make sure that the scrollbar is at the bottom of the scroll container at every new post. Iv’e been using the {setTop:”1000opx”} to put the scrollbar at the bottom of the scroll container however it only works when I manually add text, not dynamically. How do I make this plugin work with my chat application?

    Thanks!

    Reply
    • malihu
      Posted on December 23, 2015 at 00:29 Permalink

      Hello and thanks for your comments.

      setTop option is used when scrollbar is initialized (loaded for the first time).

      What you need, is to use the scrollTo method to scroll to bottom each time a new post/message is loaded.

      I’ve implemented the custom scrollbar on various chat apps and usually you’ll need some kind of condition to check whether the scrollbar is at the bottom in order to trigger the scrollTo method. This is generally the case because the user might want to scroll up to check previous messages and you wouldn’t want to interrupt his action(s) and scroll to bottom on every new message (hope I’m making sense).

      A general/simplified example of this, would be something like the following:

      (function($){ //global variable to check scroll-to bottom var autoScroll; //scrollbar initialization $(window).load(function(){ $(selector).mCustomScrollbar({ callbacks:{ onInit: function(){ autoScroll=1; }, onScrollStart: function(){ autoScroll=0; }, onScroll: function(){ autoScroll=0; }, onTotalScroll: function(){ autoScroll=1; } } }); }); //...later on in your chat message loading function if(autoScroll){ $(selector).mCustomScrollbar("scrollTo","bottom"); } })(jQuery);

      Reply
      • Raf Goesmann
        Posted on December 23, 2015 at 22:50 Permalink

        Hello Malihu,

        I am just replying to say thank you very much for the fast reply and to let you know that the scrolling does work and it looks beautiful!

        Thanks again and Merry Christmas!

        Reply
        • malihu
          Posted on December 24, 2015 at 00:58 Permalink

          Cool ๐Ÿ™‚
          Thank you and Merry Christmas!

          Reply
  2. Connor
    Posted on December 22, 2015 at 17:12 Permalink

    How do you get it to start at the end of the scroll

    Reply
    • malihu
      Posted on December 22, 2015 at 18:30 Permalink

      Plugin archive contains init_position_example.html which demonstrates how to set initial scrollbar position (demo, code).

      Option used: setTop

      An alternative way would be to use scrollTo method after plugin initialization, e.g. $(selector).mCustomScrollbar("scrollTo","bottom");

      Reply
  3. cuisys
    Posted on December 22, 2015 at 09:58 Permalink

    HTML:

    close

    JS:
    var scrollbarStarabout = $(‘.showmask-star-aboutsclass .showmask-maincontents’);
    scrollbarStarabout.mCustomScrollbar();

    $(“#StartopAbout”).click(function(){
    scrollbarStarabout.mCustomScrollbar(“update”);
    $.mask.show( $(‘#showmask-star-abouts’).html() );
    });

    #showmask-star-abouts default is hidden, using the dialog like a plug-in, mCustomScrollbar can not work properly, if the #showmask-star-abouts is shown to be normal work, curious

    Reply
    • malihu
      Posted on December 22, 2015 at 15:19 Permalink

      Post your code inside code tags (see info inside comment box) or send me a link/test page so I can help.

      Reply
  4. Diwakar Singh
    Posted on December 20, 2015 at 10:46 Permalink

    Hi Malihu,

    I can see that after using mCustomScrollBar I am unable to do focusout from my textboxes in bootstrap-modal forms.

    Whenever I focus on any textbox, textbox gets focused but when I click ouside the textbox, it doesnot get focuout and the cursor still blinks in the textbox itself.

    I am using bootstrap in my project.

    Please suggest solution.

    Thanks,
    Diwakar Singh

    Reply
    • malihu
      Posted on December 20, 2015 at 17:09 Permalink

      Hi,

      I cannot replicate this with simple text fields in bootstrap modal. Do you have other scripts applied on the text fields? Do you get any console errors?

      Reply
  5. Larry
    Posted on December 18, 2015 at 23:17 Permalink

    Thx for the plug-in. It’s very easy to implement. However, I do find an issue. On touch screen, it’s very un-responsive in IE (using hand gesture). Sometimes it works while many other times it doesn’t. With Chrome there is no issue. With IE there is no issue with mouse wheel, either. Very strange. If you have a touch screen laptop, you can test it out on the demo page (http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html). Does anyone have a clue how to resolve this issue?

    Reply
    • malihu
      Posted on December 21, 2015 at 20:41 Permalink

      Thanks for the feedback. I’m aware of this. It happens on devices with touch and cursor on IE/Edge (only). The problem is that I don’t have such device (i.e. touch-screen laptop, ms surface etc.) for testing, so finding what exactly happens and applying a solution is a very slow process… As soon as I have a solution I’ll include it on a new release.

      Reply
      • Larry
        Posted on December 23, 2015 at 23:39 Permalink

        I can’t believe I’m the only one with this touch screen issue in IE. Hope you will get a touch screen laptop for Christmas gift ๐Ÿ™‚

        Reply
        • malihu
          Posted on December 24, 2015 at 01:05 Permalink

          lol thanks!
          The amount of devices developers need to have these days (just for basic testing) is insane.

          Reply
  6. Janpol
    Posted on December 16, 2015 at 10:47 Permalink

    Hi,

    Thanks for your work!
    Could you add horizontal scroll example in your demo page?

    Thanks in advance!

    Reply
  7. Manfred Kempener
    Posted on December 15, 2015 at 16:26 Permalink

    Hi Manos,
    for friends I executed this site: http://www.streetfood-bali-java.de/

    In the Streetfood part I integrated your scroller.
    Question: The background-image should not scroll.
    How to fix it?

    Kind regards
    Manfred

    Reply
    • Manfred Kempener
      Posted on December 15, 2015 at 16:28 Permalink

      correction: background-image should scroll together with content!

      Reply
      • malihu
        Posted on December 15, 2015 at 18:01 Permalink

        Hello,

        In your CSS, apply the background image on .pageStreet .mCSB_container selector (instead of .pageStreet).

        You may also have to remove the content wrapper’s right margin so the background fills all available space:

        .pageStreet .mCSB_inside > .mCSB_container{ margin-right: 0; }

        Reply
        • Manfred Kempener
          Posted on December 16, 2015 at 09:53 Permalink

          Hi Manos,

          super – it works.

          Thanks a lot.
          Manfred

          Reply
  8. Diwakar Singh
    Posted on December 15, 2015 at 08:46 Permalink

    I am using this scroll-bar plugin in bootstrap-select.js (dropdown).
    So, whenever I try to scroll by holding the spinner(dragger) and do the mousekeyup ouside the track of scroll, the dropdown closes.

    Please suggest solution.

    Reply
  9. mmdwc
    Posted on December 15, 2015 at 01:45 Permalink

    hello, I’m trying to add a callback after a scroll action, but it’s not working.

    I need to launch a function after my content scrolled top.

    first I tried with my solution :

    $('body').on('click', '.infos_open', function () { $(".mCustomScrollbar").mCustomScrollbar("scrollTo",0, function(){ $('.infos_fixed').removeClass('fixed'); }); });

    and using your doc :

    $('body').on('click', '.infos_open', function () { $(".mCustomScrollbar").mCustomScrollbar("scrollTo",0, { scrollInertia: 3000, callbacks: { onScroll: function(){ $('.infos_fixed').removeClass('fixed'); } } }); });

    but it’s not working either… Can you please help me we this ?
    thanks !

    Reply
    • malihu
      Posted on December 15, 2015 at 02:39 Permalink

      Hello,

      The callback functions are set on scrollbar initialization so they work globally.
      To set callback functions, you need to initialize the scrollbar via javascript (not HTML) – see “How to use it -> Initialization”.
      This way you could do:

      //init scrollbar $(selector).mCustomScrollbar({ callbacks:{ onScroll: function(){ $('.infos_fixed').removeClass('fixed'); } } }); //your event $('body').on('click', '.infos_open', function () { $(".mCustomScrollbar").mCustomScrollbar("scrollTo",0); });

      Now, my guess is that you want to constantly toggle the fixed class according to the scroll position… is that right?
      If yes, you should use whileScrolling callback and toggle the class by checking if scrolling is over a value of pixels. For example:

      //init scrollbar $(selector).mCustomScrollbar({ callbacks:{ whileScrolling:function(){ if(this.mcs.top<-100){ //if scrolling is more than 100 pixels add the class $('.infos_fixed').addClass('fixed'); }else{ //if scrolling is less than 100 pixels remove class $('.infos_fixed').removeClass('fixed'); } } } }); //your event $('body').on('click', '.infos_open', function () { $(".mCustomScrollbar").mCustomScrollbar("scrollTo",0); });

      Hope this helps

      Reply
      • an30111
        Posted on December 16, 2015 at 13:57 Permalink

        Thank u so much, very helpful!

        Reply
  10. an30111
    Posted on December 14, 2015 at 16:38 Permalink

    Hi,
    i have 3 (positioned in 3 different table rows) that have to scroll together.
    How can i propagate the scroll event to the other scrollbars? Is it possible to do that in real time?

    Thanks,
    Andrea

    Reply
    • malihu
      Posted on December 14, 2015 at 17:04 Permalink

      Those 3 scrollbars scroll 3 different contents?

      Reply
    • malihu
      Posted on December 14, 2015 at 19:38 Permalink

      I’ve uploaded a demo of what you describe here:
      http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbars-synchronization-demo.html

      You basically need to trigger a scrollTo method (with few specific options) on whileScrolling callback for each scrollbar.

      The HTML/JS is pretty straightforward so normally, you could simply adjust it to your code:

      <!-- markup example --> <div id="content-1" class="content"> content... </div> <div id="content-2" class="content"> content... </div> <div id="content-3" class="content"> content... </div>

      //mCustomScrollbar function call (just change elements selectors) $("#content-1,#content-2,#content-3").mCustomScrollbar({ callbacks:{ whileScrolling:function(){ $(".content").not($(this)).mCustomScrollbar("scrollTo",this.mcs.top,{ scrollInertia:0,timeout:0,onUpdate:false }); } } });

      You can use id attributes (like above) or just a class, e.g.
      $(".content").mCustomScrollbar({ ...
      It should work either way.

      Reply
  11. hossein
    Posted on December 13, 2015 at 12:01 Permalink

    hi.
    thanks Manos for good article.
    your plugin is great !

    Reply
  12. lopata
    Posted on December 12, 2015 at 03:26 Permalink

    Hi

    I have a problem with the scrollbar on my chat,

    When I initialize it,
    add elements to the inner element
    then I do update on the scrollbar
    then scrollTo “last”

    Sometimes (1/3 times) I can’t scroll back to top, it stay stuck at bottom. But anywhen there’s a new message (and new elements and new update emited) I can scroll to top

    I don’t know why this is happening

    thanks

    Reply
    • lopata
      Posted on December 12, 2015 at 11:31 Permalink

      Nevermind I fixed it by doing

      $("#chat").mCustomScrollbar("scrollTo","last",{scrollInertia:0}); $("#chat").mCustomScrollbar("update");

      instead of
      $("#chat").mCustomScrollbar("update"); $("#chat").mCustomScrollbar("scrollTo","last",{scrollInertia:0});

      Reply
    • lopata
      Posted on December 12, 2015 at 16:37 Permalink

      Actually that did not fix the problem:

      The scroll bar get stuck on the last element and can’t scroll unless we drag it manually or we update it again after a while

      Reply
    • malihu
      Posted on December 12, 2015 at 19:13 Permalink

      Do you need to use the update method manually? The scrollbar should auto-update automatically every time content changes. Have you disabled updateOnContentResize option?

      Also, have you tried scrolling to "bottom" instead of "last"?

      Reply
      • lopata
        Posted on December 13, 2015 at 01:36 Permalink

        I finally fixed it by making a new update within a timeout of 1 second

        It seems that asynchronous functions are used when initializing the scrollbar.

        Reply
  13. jorge_mejรญa
    Posted on December 11, 2015 at 17:36 Permalink

    Hi, thanks for the plugin Iยดm having an issue with google chrome, the scroll bar always appear. I hope you can help me.

    Reply
    • malihu
      Posted on December 11, 2015 at 18:58 Permalink

      I’m assuming you apply the scrollbar on body element(?) which you probably need to give overflow: hidden; in your CSS.

      Reply
  14. Thomas
    Posted on December 9, 2015 at 19:23 Permalink

    when i initialize scroll bar like this: $(‘selector’).mCustomScrollbar({theme:’minimal-dark’, alwaysShowScrollbar: 2});

    The theme option is overriding “alwaysShowScrollbar: 2” option.

    How can i have a theme but specify other options too?

    Reply
    • malihu
      Posted on December 10, 2015 at 10:26 Permalink

      “minimal” and “minimal-dark” themes are a bit special as they overwrite some options in order to be ready-to-use without changing defaults.
      However, the alwaysShowScrollbar option is not among the ones that get overwritten.

      I’m not sure if this is the option you need as I’m guessing you just want to remove scrollbar’s auto-hide feature, which is defined in autoHideScrollbar option (and indeed gets overwritten by the “minimal” themes).

      Check the description of both autoHideScrollbar and alwaysShowScrollbar options and see if you want the former.

      If you do need to disable autoHideScrollbar on “minimal-dark” theme you can add the following rule in your CSS:

      .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools.mCS-minimal-dark, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools.mCS-minimal-dark{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }

      In either case, you can always clone any of the themes in jquery.mCustomScrollbar.css (or create a new one) and set the CSS rules you want. For more info see “Creating a new scrollbar theme” in “Scrollbar styling & themes” section

      Reply
  15. Speakera
    Posted on December 9, 2015 at 00:59 Permalink

    Hi. Thanks for such a great script.

    I’m tryin to use a scrollto option with element selector position.
    But after page loads dragger is not at the same line with selector.

    $("#satlists").mCustomScrollbar("scrollTo","#id75");
    is it possible to correct position something like
    "#id75" + "-=1000px"

    I also tried to use setLeft: “-1000px”, but it doesnot work together with scrollto option.

    Reply
    • malihu
      Posted on December 9, 2015 at 02:32 Permalink

      If you use setLeft you don’t need scrollto. When page loads (assuming your call mCustomScrollbar function on window load) content will scroll to 1000 pixels. Isn’t this what you want?

      In addition, you can alter the target’s scroll-to position by changing its CSS top padding or position property (I can’t really tell though as I don’t know your HTML/CSS).

      You could also do calculations in scrollTo method by using an anonymous function in position parameter. For example:

      $(selector).mCustomScrollbar("scrollTo",function(){ return $("#id75").position().left-1000; });

      By your description, it sounds more like a CSS issue though. Maybe changing some CSS property fixes the problem.

      Reply
  16. Giorgi Shalikashvili
    Posted on December 8, 2015 at 00:06 Permalink

    Hello, let me say this is one of the best plugins on internet!!

    I have one question and will be extremely thankful if you help me solve it.

    I want to make scrollbar inside content box but on top of the content so it does not effect content layout.

    thank you in advance.

    Great job

    Reply
    • malihu
      Posted on December 8, 2015 at 00:33 Permalink

      Hello,

      Do you need to make the scrollbar element appear over the scrollable content (e.g. without margins etc.)?
      If yes, you can use a theme like “minimal” or set scrollbarPosition option parameter to "outside".

      Reply
  17. jalal
    Posted on December 7, 2015 at 04:53 Permalink

    hi . thanks for your plugin .
    i use of live example on github for make page . i want use of body scroll and i should use of :
    html, body { height: 100%; }
    for this scroll .
    but when i use of this code for make this scroll , i can’t use of go-to-top button , because the jquery code can’t find height position .
    how can resolve this problem .
    thanks again .

    Reply
    • malihu
      Posted on December 7, 2015 at 11:02 Permalink

      Hi,

      You’ll have to use plugin’s scrollTo method on your buttons, links etc.
      For example:
      $(selector).mCustomScrollbar("scrollTo","top");

      Reply
  18. Bryan
    Posted on December 7, 2015 at 02:27 Permalink

    The scrollTo method is not working properly. You can see that if you try to scroll to 90% you will actually go to 100%.

    Even in the demo if you manually do a call to scroll to something like 20%, it will visually tell you that you are actually at 24%.

    Reply
    • malihu
      Posted on December 7, 2015 at 11:19 Permalink

      Thanks for the feedback. I’ll push a fix for this today on 3.x branch and include it on the upcoming 3.1.4 version.

      EDIT: Done (fix ref. line: 1856)

      Reply
      • Bryan
        Posted on December 7, 2015 at 16:11 Permalink

        Thanks for being so quick with a fix!

        And since I didn’t mention it in my previous post, thanks for the plugin. It was a life saver for what I needed!

        Reply
  19. lopata
    Posted on December 6, 2015 at 14:00 Permalink

    So I, I couldn’t drag the scrollbar when I deactivated the (onMouseMove; see previous message).

    So I reactivated it for the drag function: but look this screenshot:
    https://gyazo.com/a3619cdd3dffbb82a28ecfab997149da

    The orange is Cpu usage caused by onmousmove of the script. And it starts whenever I move the mouse: It should be that it starts only when the user click on the scrollbar and move the mouse.

    regards

    Reply
    • malihu
      Posted on December 6, 2015 at 19:51 Permalink

      I’m not sure about this… The plugin script does not run the draggable/selectable code unless the scrollbar (or content) is pressed (lines 1214 and 1408).
      What happens when you move the mouse and the plugin is deactivated/not used?

      Reply
      • lopata
        Posted on December 7, 2015 at 01:18 Permalink

        Why not doing something like that:

        $(".scrollbar").mousedown(function () { $(this).mousemove(function () { console.log("change offset...etc"); }); }).mouseup(function () { $(this).unbind('mousemove'); }).mouseout(function () { $(this).unbind('mousemove'); });

        that way no mousmove events are fired when it’s not needed!

        Reply
        • malihu
          Posted on December 7, 2015 at 01:53 Permalink

          It’s not that simple. Mousemove event must be binded also on document (or document objects within iframes), otherwise dragging the cursor out of the scrollbar won’t work.

          By checking the 2 lines I mentioned above you’ll see that no mousemove code is fired, unless the draggable variable is defined (which happens only when scrollbar is pressed).

          Have you checked CPU usage without the plugin enabled?

          Reply
          • lopata
            Posted on December 7, 2015 at 02:32 Permalink

            Yes, without the plugin, no mousemove events, with the plugin the orange events on the screenshot above, And I don’t even click anywhere.

            But on line 1214, the mousemove is bind to document? and this mousemove is bind 5 times? because When I do an alert, at this place I have 5.

            Anyway, since it’s binded it fires mousemove events even if the callback does draggable test… no offset in calculated but there is still the mousemove events from jquery

            It’s not that complicated, I changed my code and this should work:
            $(".scrollbar").mousedown(function () { $(document).mousemove(function () { console.log("change offset...etc"); }); }); $(document).mouseup(function () { $(document).unbind('mousemove'); });

            I did the test on a button and it does work

        • malihu
          Posted on December 8, 2015 at 00:21 Permalink

          OK I’ll try to find some time to do some extended testing on this (although I’m not sure when). I need to test such changes thoroughly before release as they might affect other things (pointer events, memory etc.). Thanks for the feedback!

          Reply
          • lopata
            Posted on December 8, 2015 at 17:24 Permalink

            Ok thanks!

            I want to do it myself already, but I don’t what is the selector for the scrollbar?

            is it mCSB_dragger ?

            thanks

          • lopata
            Posted on December 13, 2015 at 16:33 Permalink

            Hi Malihu!

            So I tried to add these lines of code on the plugin initialisation:

            window[pluginNS]=true; $(window).load(function(){ //Added the following $(document).mouseup(function () { mCSB_dragger.unbind('mousemove'); mCSB_container.unbind('mousemove'); });

            But when I mouseup it stand that mCSB_dragger is not defined, do you know how I could do that?

        • malihu
          Posted on December 9, 2015 at 02:17 Permalink

          Yes it’s mCSB_dragger

          Reply
  20. MA Rahman
    Posted on December 6, 2015 at 09:09 Permalink

    Hey, your plugin works great… I am still learning it and exploring it… Great work!! …. I am using it for my own project… If I make some money out of my project I will really love to donate you…. ๐Ÿ™‚

    Reply
    • malihu
      Posted on December 6, 2015 at 19:53 Permalink

      Thanks ๐Ÿ™‚

      Reply
  21. Mike
    Posted on December 4, 2015 at 21:35 Permalink

    This tool works great, but I just noticed a ton of javascript errors being thrown in my browser’s console. Mouse scrolling works great, but when I grab the scrollbar and scroll below the bottom of my page frame (so my cursor is over my taskbar), it throws JS errors every time the cursor moves. Again, works fine, but throws a ton of JS errors under this condition. Here is the error:

    TypeError: $(…).offset(…) is undefined
    ….target.ownerDocument!==document ? [$(frameElement).offset().top,$(frameElement)…

    It’s on this line in your js file:

    var t=e.type,o=e.target.ownerDocument!==document ? [$(frameElement).offset().top,$(frameElement).offset().left] : null,

    Reply
    • malihu
      Posted on December 4, 2015 at 22:21 Permalink

      Are you using the scrollbar on iframe(s)?
      Are those iframes cross-domain (do they exist on the same domain as their host page)?
      Are you using the very latest plugin version (3.1.3)?

      Reply
      • Mike
        Posted on December 4, 2015 at 22:46 Permalink

        It’s happening in your own demo. http://screencast.com/t/6DquAPK539k

        It looks like it’s only an issue in FF by the way.

        Reply
      • Mike
        Posted on December 4, 2015 at 23:26 Permalink

        I had made and posted a screencast, but it’s apparently got removed.

        It’s not in an iframe. The issue is occurring in your demo as well. Just drag and hold the scroller outside of the browser window. It looks like it’s only an issue in FireFox FWIW.

        Reply
  22. Kurt Bugeja
    Posted on December 3, 2015 at 19:04 Permalink

    Hi,

    I am using live and liveSelector to dynamically add mCustomScrollbar to multiple lists:
    $(document).mCustomScrollbar({ live: true, liveSelector: "#gNavdivMain .facet .content", mouseWheel: { preventDefault: true } });

    As you can see I want to add a scrollbar to the liveSelector and not to the current selector. The description of liveSelector is: “Set the matching set of elements (instead of the current selector) to add scrollbar(s), now and in the future.” I tried invoking mCustomScrollbar on a parent selector however the parent selector was also being considered for scrolling, then I tried $(document) which worked on Chrome however didn’t on IE. What can I do in this case?

    Thank you.

    Reply
    • malihu
      Posted on December 3, 2015 at 21:14 Permalink

      Do you want the scrollbar applied just on "#gNavdivMain .facet .content" elements?
      If yes, you can simply do:
      $("#gNavdivMain .facet .content").mCustomScrollbar({ live: true, mouseWheel: { preventDefault: true } });
      or
      $("#gNavdivMain .facet .content").mCustomScrollbar({ live: true, liveSelector: "#gNavdivMain .facet .content", mouseWheel: { preventDefault: true } });
      which is the same thing (probably more error-proof).

      You don’t have to apply the scrollbar function on a parent element at all.

      Reply
      • Kurt Bugeja
        Posted on December 3, 2015 at 22:31 Permalink

        Great thanks! Can you explain better what the liveSelector property does?

        Reply
        • malihu
          Posted on December 4, 2015 at 22:14 Permalink

          Technically speaking, getting the selector from jQuery object automatically, can be tricky.

          Using liveSelector option to explicitly define the selector is more error-proof. Its mechanism is basically the same as jQuery’s delegate (event delegation) which requires that you pass the selector as string.

          So, the plugin script will use the liveSelector value (if set), instead of getting the selector automatically.

          Hope this makes sense ๐Ÿ™‚

          Reply
  23. lopata
    Posted on December 2, 2015 at 13:35 Permalink

    Hi!

    I am trying to optimize my website unfortunately

    I have a lot of MouseMove event being shot coming from your plugin.

    I just have 3 scroll bars that are updated manually. I don’t need any mousemove events. How can I avoid this?

    best regards

    Reply
    • lopata
      Posted on December 2, 2015 at 13:42 Permalink

      Also, many updateLayerTree and hitTest, when I deactivate custom scroll bar I don’t have all these

      Reply
      • lopata
        Posted on December 2, 2015 at 14:15 Permalink

        Nevermind I directly commented the event in the script but you should set an option to disable the dragable and selectable thingy. And the update Layer Tree and hitTest were not coming from your plugin.

        cheers

        Reply
  24. matt
    Posted on December 2, 2015 at 09:36 Permalink

    Hi Guys,
    first nice Job!
    So i need some help, we use this slider as Parallax Timeline bud now we have a Problem on Safari the dosen’t load the conten in full widh.
    any nowen issue for this or batter a fix :-)?

    Reply
    • malihu
      Posted on December 2, 2015 at 15:49 Permalink

      Can you send me link? I can’t really help without seeing your page…

      Reply
  25. igor
    Posted on December 2, 2015 at 08:30 Permalink

    How i can init plugin right away in needed scroll position
    except -mCustomScrollbar(“scrollTo”, xxx ) ?
    Thanks.

    Reply
  26. igor
    Posted on December 1, 2015 at 15:28 Permalink

    Very much thank for this job…

    Reply
  27. Leonardo
    Posted on November 30, 2015 at 19:16 Permalink

    Hi,

    Great control.
    I was wondering how can i change some properties of the widget at run-time; for example, i want to have a button that when clicked, the theme changes from 3d-thick to minimal for example; is this possible??

    Thx,

    Reply
    • malihu
      Posted on December 1, 2015 at 21:01 Permalink

      It’s possible to change few (non-major) options on-the-fly by using the $(selector).data("mCS").opt.option object. For example:
      $(selector).data("mCS").opt.scrollInertia=600;

      Changing the scrollbar theme cannot be done this way though, as it involves more than just simple value(s). You should use plugin’s destroy method first and then re-initialize the scrollbar with your options and the theme you want. For example:
      //first scrollbar init $("#el-id").mCustomScrollbar({ theme:"dark" }); //at some point later (e.g. within click event etc.)... $("#el-id").mCustomScrollbar("destroy").mCustomScrollbar({ theme:"dark-2" });

      Reply
  28. jenti
    Posted on November 30, 2015 at 08:52 Permalink

    How to change hover scroll classchange

    Reply
  29. Bob
    Posted on November 26, 2015 at 17:36 Permalink

    Hey,

    Great work.

    I am trying to use multiple scrollbars on one page, which works great. But I am having issues with anchored links, I have the code:

    <script src="js/jquery.mCustomScrollbar.concat.min.js"></script> <script> (function($){ $(window).load(function(){ $("#scrollbar").mCustomScrollbar({ scrollButtons:{enable:true,scrollType:"stepped"}, keyboard:{scrollType:"stepped"}, mouseWheel:{scrollAmount:188}, theme:"rounded-dark", autoExpandScrollbar:true, snapAmount:188, snapOffset:65 }); }); })(jQuery); </script> <script type="text/javascript"> $("a[href*='#']").click(function(e){ var val=$(this).attr("href").split("#")[1]; //get just the id value if($("#"+val).parents(".mCustomScrollbar").length){ //prevent default behavior and call method //only if id is within content with custom scrollbar! e.preventDefault(); $(".scrollbar").mCustomScrollbar("scrollTo","#"+val); } }); </script> <script> (function($){ $(window).load(function(){ $("#scrollbar-s").mCustomScrollbar({ scrollButtons:{enable:true,scrollType:"stepped"}, keyboard:{scrollType:"stepped"}, mouseWheel:{scrollAmount:188}, theme:"rounded-dark", autoExpandScrollbar:true, snapAmount:188, snapOffset:65 }); }); })(jQuery); </script> <script type="text/javascript"> $("a[href*='#']").click(function(e){ var val=$(this).attr("href").split("#")[1]; //get just the id value if($("#"+val).parents(".mCustomScrollbar").length){ //prevent default behavior and call method //only if id is within content with custom scrollbar! e.preventDefault(); $(".scrollbar-s").mCustomScrollbar("scrollTo","#"+val); } }); </script>

    The anchors may be in both sections. But when you click on the link the target scrolls on both sections. Is there a way so it only scrolls on the section I want it to.

    I hope this makes sense.

    Any help would be appreciated.

    Reply
    • malihu
      Posted on November 26, 2015 at 20:51 Permalink

      The second click event overwrites the first one as it’s applied on the same selector ("a[href*='#']").

      Are those link inside the content with the scrollbars?
      If yes, you should probably change the selectors to something like:
      ".scrollbar a[href*='#']"
      and
      ".scrollbar-s a[href*='#']"
      assuming of course that the elements don’t have the same classes.

      Or perhaps keep only the second event and change:
      $(".scrollbar-s").mCustomScrollbar("scrollTo","#"+val);
      to:
      $("#"+val).parents(".mCustomScrollbar").mCustomScrollbar("scrollTo","#"+val);

      I cannot be sure though as I don’t know your markup…

      Reply
      • Bob
        Posted on November 27, 2015 at 11:53 Permalink

        Thank you, I played about with the code provided, this came out with:

        <script> (function($){ $(window).load(function(){ $("#scrollbar").mCustomScrollbar({ scrollButtons:{enable:true,scrollType:"stepped"}, keyboard:{scrollType:"stepped"}, mouseWheel:{scrollAmount:188}, theme:"rounded-dark", autoExpandScrollbar:true, snapAmount:188, snapOffset:65 }); }); })(jQuery); </script> <script type="text/javascript"> $(".scrollbar a[href*='#']").click(function(e){ var val=$(this).attr("href").split("#")[1]; //get just the id value if($("#"+val).parents(".mCustomScrollbar").length){ //prevent default behavior and call method //only if id is within content with custom scrollbar! e.preventDefault(); $("#"+val).parents(".mCustomScrollbar").mCustomScrollbar("scrollTo","#"+val); } }); </script> <script> (function($){ $(window).load(function(){ $("#scrollbar-s").mCustomScrollbar({ scrollButtons:{enable:true,scrollType:"stepped"}, keyboard:{scrollType:"stepped"}, mouseWheel:{scrollAmount:188}, theme:"rounded-dark", autoExpandScrollbar:true, snapAmount:188, snapOffset:65 }); }); })(jQuery); </script> <script type="text/javascript"> $(" a[href*='#']").click(function(e){ var val=$(this).attr("href").split("#")[1]; //get just the id value if($("#"+val).parents(".mCustomScrollbar").length){ //prevent default behavior and call method //only if id is within content with custom scrollbar! e.preventDefault(); $("#"+val).parents(".mCustomScrollbar").mCustomScrollbar("scrollTo","#"+val); } }); </script>

        This allows me to have both scrolling areas scrolling independantly.

        Thank you!

        Reply
        • malihu
          Posted on November 27, 2015 at 12:28 Permalink

          Cool. I think you can also remove the first click event (you only need one).

          Reply
  30. Mike
    Posted on November 26, 2015 at 11:33 Permalink

    The plugin works perfectly, but don’t know why, the browser can’t read the plugin call via jquery.

    $( document ).ready(function() {
    //Sostituzione scrollbar standard su box dei contenuti
    (function($){
    $(window).load(function(){

    $(“.cell_right”).mCustomScrollbar({
    scrollButtons: “enable”
    });
    });
    })(jQuery);
    });

    For this reason, i can change theme via html with data-mcs-theme attribute, but arrows icon on top and bottom of the scrollbars doesn’t appear.
    I checked the code and there is no code refered to the icons.

    Reply
    • malihu
      Posted on November 26, 2015 at 20:38 Permalink

      The code should be:

      (function($){ $(window).load(function(){ $(".cell_right").mCustomScrollbar({ scrollButtons: "enable" }); }); })(jQuery);

      or:

      (function($){ $(document).ready(function(){ $(".cell_right").mCustomScrollbar({ scrollButtons: "enable" }); }); })(jQuery);

      See Initialize via javascript in How to use it section.

      Reply

Comments pages: 1 70 71 72 73 74 81

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