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

Post a comment

Comments pages: 1 63 64 65 66 67 83

  1. Aravind
    Posted on June 11, 2015 at 23:45 Permalink

    I am trying to use this plugin in a website that is built predominantly using ext-js. I want to select specific divs and call the mCustomScrollbar() method. But this is not working. I tried to have a selector based on a class name based selector and iterating and calling the method for specific elements, but this is not working. Can you please help?

    Reply
  2. Richard
    Posted on June 11, 2015 at 22:08 Permalink

    Hello malihu,

    Once again I’m coming here for advice, are you aware of the conflict between your plugin and wow.js?

    I’m having an issue where when using the scrollbar on body or other container and also using wow.js to show the content of this container, only the content that is already in viewport on load is shown, but when scrolling down the next content stays hidden.

    Reply
    • malihu
      Posted on June 11, 2015 at 22:28 Permalink

      I think wow.js works only with browser’s native (default) scrollbar. This is normal for such plugin.

      Custom scrollbar use its own scroll events (equivalents to js window scroll). Perhaps wow.js provides methods to trigger its events within other scripts(?) In such case the 2 plugin could work together…

      Reply
      • Richard
        Posted on June 12, 2015 at 13:45 Permalink

        That’s probably the problem, I found something like this but I’m not sure if it’s of any help.

        .on(‘scroll.wow’, function(){})

        Reply
        • malihu
          Posted on June 18, 2015 at 12:51 Permalink

          I don’t think this will help. It’s probably a way to add callbacks after its scrolled the document (which won’t happen with custom scrollbar). You should contact the wow.js developer and ask him if he provides such methods.

          Reply
          • Richard
            Posted on June 21, 2015 at 15:54 Permalink

            I think you are right. I tried posting an issue on the github page but I didn’t get a reply, so I will have to remove wow for now.

            Thanks!

      • Richard
        Posted on June 17, 2015 at 19:20 Permalink

        Do you think it’s possible?

        Reply
  3. Jamie
    Posted on June 11, 2015 at 16:07 Permalink

    Hi Malihu,

    thanks for your great plugin.

    I have a question need your help. If I initialise container like following way:

    $(“.content”).mCustomScrollbar({

    });

    how do I append more content to the container later?

    currently I am using a workout:

    $(“.mCSB_container”).append(element);

    but sometimes it generates an extra mCSB_outside inside mCSB_container and also includes exact same content of new append content.

    thanks

    Reply
    • malihu
      Posted on June 11, 2015 at 19:44 Permalink

      The following should work:
      $(".content .mCSB_container").append(element);

      Reply
  4. azhar
    Posted on June 11, 2015 at 11:11 Permalink

    This is a great find!
    May I know what’s the compatibility across browsers?

    Reply
    • malihu
      Posted on June 11, 2015 at 20:06 Permalink

      I’ve successfully tested the plugin on Chrome, Firefox (since version 12), IE8/9/10/11, Safari (on OSX and iOS version 5+), Android (version 2.3+), Windows Phone (version 8+).

      There are many, many browsers out there and the plugin should normally work without issues.

      Reply
  5. Dave
    Posted on June 11, 2015 at 08:16 Permalink

    this scrollbar is great. I’m using it in an elearning course I’m developing. However, it sometimes disappears. The scrolling action stays, but the tools (buttons, scrollbar) all are invisible. Any thoughts?

    Thanks,

    Reply
    • malihu
      Posted on June 11, 2015 at 20:08 Permalink

      I can’t really say… I’ve never has such issue reported so maybe it has something to do with some specific CSS rule(s) in your app(?)

      Reply
  6. naveed nasib
    Posted on June 10, 2015 at 20:08 Permalink

    Thank you its much excited j Query i love to work on..
    Thank you Once again

    Reply
  7. Alexey
    Posted on June 9, 2015 at 13:57 Permalink

    Hi,

    i need only the scroll buttons to be visible, the scrollbar between them must be always transparent (hidden). Scrolling must be possible only using buttons or mousewheel. User content between buttons (behind the srollbar) must be clickable.

    How can i implement this?

    Thanks in advance!

    Best regards,

    Alexey

    Reply
    • Alexey
      Posted on June 9, 2015 at 17:01 Permalink

      ok, it can be solved using following css:

      /* hide scrollbar */
      .mCSB_scrollTools {
      height: 0px;
      }

      /* explicitly set the buttons size and position */
      .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight {
      height: 20px;
      bottom: 0px;
      }

      Reply
  8. jine
    Posted on June 8, 2015 at 09:45 Permalink

    how to make move scroll right +=70 left +=70 top +=70 bottom +=70 separately each
    a function
    eg

    function down(){
    //top
    $(“.demo-yx”).mCustomScrollbar(“scrollTo”, “+=70”, {
    scrollInertia: 0
    });

    }

    function up(){
    $(“.demo-yx”).mCustomScrollbar(“scrollTo”, “-=70”, {
    scrollInertia: 0
    });

    }
    function right(){

    }
    function left(){

    }

    Reply
    • malihu
      Posted on June 8, 2015 at 21:16 Permalink

      If you’re using vertical and horizontal scrollbars on the same element, you can use and array: [y,x] (See position parameter: [array] in scrollTo method – example is also included)

      $(selector).mCustomScrollbar("scrollTo",[y,x]);

      For example:

      up/down:
      $(selector).mCustomScrollbar("scrollTo",["-=70",false]); $(selector).mCustomScrollbar("scrollTo",["+=70",false]);
      same as:
      $(selector).mCustomScrollbar("scrollTo","-=70"); $(selector).mCustomScrollbar("scrollTo","+=70");

      left/right:
      $(selector).mCustomScrollbar("scrollTo",[false,"-=70"]); $(selector).mCustomScrollbar("scrollTo",[false,"+=70"]);

      Reply
  9. zm_mail
    Posted on June 6, 2015 at 19:03 Permalink

    I have main body horizontal scroll. I want to use mCustomScrollbar,but it doesn’t work. And all of mCustomScrollbar examples is for ‘div’. Can you give me a main body example, thanks for your work.


    $(window).load(function(){
    $.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default
    $.mCustomScrollbar.defaults.axis=”y”; //enable 2 axis scrollbars by default

    $(“#bg_body”).mCustomScrollbar({theme:”dark”});
    });

    Reply
    • Mampionona Olivier
      Posted on June 6, 2015 at 21:52 Permalink

      Try this

      Css:
      body { width: 600px; overflow: auto; }

      Js
      $(function() {
      $(‘body’).mCustomScrollbar({
      theme: ‘dark’,
      axis: ‘x’
      });
      });

      Reply
      • zm_mail
        Posted on June 7, 2015 at 05:40 Permalink

        It doesn’t work. I find “style=”display: none;”.

        Reply
        • zm_mail
          Posted on June 7, 2015 at 05:42 Permalink

          <div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-dark mCSB_scrollTools_vertical" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; height: 0px; top: 0px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div></div><div class="mCSB_draggerRail"></div></div></div>

          Reply
  10. Mampionona Olivier
    Posted on June 6, 2015 at 18:26 Permalink

    I combine this plugin with Ajax (infinite scrolling) and it work fine

    Reply
  11. Mampionona Olivier
    Posted on June 6, 2015 at 18:23 Permalink

    Your scrollbar plugin is very useful for me, thank you for this post

    Reply
  12. Sharjil
    Posted on June 4, 2015 at 15:51 Permalink

    I am using your plugin. It works fine on chrome and firefox, but it does not work properly in safari. The scroll speed is very low in safari. What should I supposed to do ?

    Reply
    • hoahc
      Posted on June 4, 2015 at 18:56 Permalink

      decrease the ” scrollInertia ” property
      E.g:
      $(“#content”).mCustomScrollbar({
      theme:”3d”,
      scrollInertia: 100,
      });

      Reply
  13. Sheldon
    Posted on June 3, 2015 at 19:09 Permalink

    Works well but I’m a little stuck.

    I need this scrollbar to automatically scroll onLoad of the page. Any suggestions?

    Reply
  14. Anil
    Posted on June 3, 2015 at 14:47 Permalink

    How can i get the height of the container in which i’m using mcustomscrollbar ?

    Generally we can get height of elements using
    $('selector')[0].scrollHeight if overflow present for divs

    But I can’t get the height of div using the above property when i’m using mcustomscrollbar

    Reply
    • malihu
      Posted on June 3, 2015 at 17:41 Permalink

      You can get the height using jQuery’s height(), e.g.:
      $('selector').height()

      scrollHeight is a different thing. To get the contents height, you could do:
      $('selector .mCSB_container').height()

      You can also get more values using plugin’s callbacks via the “mcs” object.

      Reply
  15. Amit
    Posted on June 3, 2015 at 13:30 Permalink

    Hey malihu, thank you very much 🙂 Amazing work!

    I have a tiny problemand i’d be glad if you could help me.

    I have a js file that adds elements dynamically.
    i use this lines to add the elements:
    $('#note-'+index).append('<div id="scroll-bar-"></div>'); var ele = document.getElementById('scroll-bar-'); ele.id="scroll-bar-" + index;
    when index is a number of course, and i do add p elements inside but that’s irrelevant (but it works…)
    after that I have this line:
    sheet.insertRule('#scroll-bar-'+index+'{height:12em; overflow:hidden;}', 0);
    in order to add the basic attributes for the element.
    But, when I add this lines:
    (function($){ $(window).load(function(){ $('#scroll-bar-'+index).mCustomScrollbar(); }); })(jQuery);
    after that inserRule line, nothing is happand! the scroll bar doesn’t show up!

    Just so you know, it does work for me when i have an hard-coded elements in my html file and I’m adding the mCustomScrollbar(); script in the end of the body or inside $(document).ready() in a js file…

    Reply
    • malihu
      Posted on June 3, 2015 at 17:36 Permalink

      You should move all your code inside window load function, otherwise it’s not in sync with mCustomScrollbar function. If this doesn’t work you can always use the live option parameter:
      $('#scroll-bar-'+index).mCustomScrollbar({ live: "on" });

      Reply
      • Amit
        Posted on June 3, 2015 at 18:24 Permalink

        I’m not sure i know what to do do….

        function getLists(){ var curUser = Parse.User.current(); var List= Parse.Object.extend("List"); var query = new Parse.Query(List); query.equalTo("usersWithThisList",curUser); query.addDescending("createdAt"); query.find({ success:function(results){ for(var i=0; i<results.length;i++){ $('#notes').append('<li><a href="#" id="note-"><h2>'+results[i].get("description")+'</h2></a></li>'); var ele = document.getElementById('note-'); ele.id="note-" + i; getTasks(results[i],i); } }, error:function(){} }); } function getTasks(list,index){ var Task= Parse.Object.extend("Task"); var query = new Parse.Query(Task); query.equalTo("parentList",list); query.find({ success:function(results){ //alert(results.length); var sheet = window.document.styleSheets[1]; if(results.length > 0){ $('#note-'+index).append('<div id="scroll-bar-"></div>'); var ele = document.getElementById('scroll-bar-'); ele.id="scroll-bar-" + index; sheet.insertRule('#scroll-bar-'+index+'{height:12em; overflow:hidden;}', 0); } for(var j=0; j<results.length;j++){ //$('#note-'+index) $('#scroll-bar-'+index).append('<p>'+results[j].get("description")+'</p>'); } (function($,i){ $(window).load(function(){ $('#scroll-bar-'+i).mCustomScrollbar(); }); })(jQuery,index); }, error:function(){} }); }

        as you can see after the second for loop i added the lines for the scrollbar, can you tell me what to change?

        Reply
  16. Keyur Patel
    Posted on June 3, 2015 at 11:41 Permalink

    hi malihu,

    i applied your js in ”drop-down”.

    It works fine, but i am unable to focus while scrolling down using key-board.

    Waiting for your reply.

    thank you & regards,
    Keyur Patel

    Reply
  17. Timon
    Posted on June 3, 2015 at 07:02 Permalink

    Hi There,

    First of all, I would really like to thank you for making this amazing scrollbar available to us. I used it in my site for both vertical as well as horizontal scrolling (same page, different divs). The horizontal scrollbar works well without any issues, however the vertical scrollbar does not scroll. I can see the scrollbar and it expands when I hover over it , but it does not scroll in the content. Below is the code.
    <div> <div id="vertical" class="content shortlinks light mCustomScrollbar" data-mcs-axis="y" style="top:385px;"> <div tabindex="0" id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside"> <div id="mCSB_1_container" class="mCSB_container" style="position:relative; top:0; left:0;height:1035px;" dir="ltr"> <h3> <img src="img/shortlinks.png" style="width: 30px; height: 30px; border:0px;"> Short Links </h3> <ul style="margin-left: 5px;list-style: none;"> <li> <a href="abc.com">abc.com</li> <li><a href="xyz.com">xyz.com</li> </ul> </div> <div class="mCSB_scrollTools mCS-dark-thin mCSB_scrollTools_vertical mCSB_scrollTools_onDrag_expand"> <div class="mCSB_draggerContainer" style="height:2000px;"> <div class="mCSB_dragger" oncontextmenu="return false;" style="position: absolute; min-height: 30px; display: block; height: 252px; max-height: 570px;"> <div class="mCSB_dragger_bar"> </div> </div> <div class="mCSB_draggerRail"> </div> </div> </div> </div> </div> </div> <script> (function($){ $(window).load(function(){ $(".shortlinks").mCustomScrollbar(); }); })(jQuery); $(".shortlinks").mCustomScrollbar({ axis:"y", // horizontal scrollbar autoExpandScrollbar:true, theme: "dark-thin" }); </script>
    Can you help in fixing it?

    Reply
    • malihu
      Posted on June 3, 2015 at 17:13 Permalink

      Hi,

      Is this the code you wrote or the code you see in browser’s developer tools?
      You seem to call mCustomScrollbar function twice on the same element (.shortlinks) which is not correct (you need to call it once in window load).
      I’d also need to see the CSS rules for the .shortlinks in order to help.

      Can you send me a test page or a link?

      Reply
      • Timon
        Posted on June 4, 2015 at 21:34 Permalink

        Hi Manos,

        Thanks for the reply! I have emailed the code and this was what I had written in the source. When I view the source code in developer tools I do see a repeat in the divs.

        Let me know

        Thanks!

        Reply
        • Timon
          Posted on June 5, 2015 at 00:44 Permalink

          Thank you Manos for your help! The solution worked!

          Reply
          • malihu
            Posted on June 5, 2015 at 00:45 Permalink

            You’re welcome 🙂

  18. Miguel
    Posted on June 2, 2015 at 20:15 Permalink

    Hello again, I’m using this amazing scrollbar but came up with a question recently. I’m applying a horizontal slider on a mobile webpage but when the user tries to scroll up or down from the center of the slider (I mean you tap and hold inside the wrapper of the slider and from there try to move the entire page up or down) the page scroll wont happen. That I think is due to the scrollbar itself because is expecting a movement to right or left (because i set the slider directon to x axis) and the actual movement happens up or down (which is zero left or right). This “bug” is really nasty because if your slider is the same height of the mobile viewport screen you get stuck in there and can navigate up or down to other content.
    Thank you so much in advance, I hope the explanation is clear and you could help me with the issue.
    Also thanks for attending to so much question, thats an amazing work, keep it up.

    Reply
    • malihu
      Posted on June 2, 2015 at 20:32 Permalink

      This is a known issue with Chrome for Android (it works on other browsers/OS like firefox, iOS Safari etc.). I’ve scheduled to fix this on the next version.

      Reply
  19. jine
    Posted on June 2, 2015 at 10:21 Permalink

    how to get current scroll to postion

    Reply
    • malihu
      Posted on June 2, 2015 at 20:29 Permalink

      Within callbacks, you can use the “mcs” object (see “User-defined callbacks”).

      Outside callbacks, you can use jQuery’s position() function, e.g.:
      $(".content .mCSB_container").position().top

      Reply
  20. James
    Posted on May 30, 2015 at 02:11 Permalink

    Hi

    I’m back again with another conflict. I’m thinking this one may just be a compatibility issue, however I’m hoping to solve it if possible.

    I’m trying to put a counterup inside my content using waypoints. So when a user scrolls to that spot where the number is say 50 it will begin to count up to 50 starting from 1. When I remove the scrollbar jquery fire the counterup will fire correctly. When the scrollbar jquery is added not the .js file just the initial call the counterup will not fire. I thought maybe perhaps script placement but I played with it a bit in that regards and nothing helped.

    Here is a codepen with it not working properly.
    http://codepen.io/jamesmyers/pen/waoxZe

    Thank you,
    James

    Reply
    • James
      Posted on May 30, 2015 at 15:50 Permalink

      Update:

      Have figured out how to trigger text count with

      callbacks:{ whileScrolling:function(){ var pct=this.mcs.topPct; if(pct>=50){ $('.count').animateNumber({ number: 165 }); } } }

      http://codepen.io/jamesmyers/pen/OVWzVW

      Is there anyway to make this repeat only 1 time instead of looping?

      Reply
      • James
        Posted on May 31, 2015 at 07:49 Permalink

        managed to use a number counter that has a duration setting which allowed me to make it only trigger 1 time.

        Using https://github.com/garethdn/jquery-numerator

        I now have count up text once triggered on the page.

        callbacks:{ whileScrolling:function(){ var pct=this.mcs.topPct; if(pct>=50){ $('.count').numerator({ toValue: 50,duration: 5000 }); } } }

        Reply
  21. OnengLar
    Posted on May 30, 2015 at 01:55 Permalink

    How to scroll in another scroll:
    for example i have main body horizontal scroll.
    in body i have some blocks with vertical blocks.
    How to scroll content in this blocks? and not scroll main horizontal scroll? before ended vertical……..

    Thanks!

    Reply
  22. Brian Daigle
    Posted on May 28, 2015 at 20:18 Permalink

    Great plugin!

    Just curious if there is a way I can use the hand icon to drag the contents of the container instead of using the mouse wheel or scrollbar.

    Thanks,
    Brian

    Reply
  23. Nil
    Posted on May 28, 2015 at 19:00 Permalink

    Can this plugin support textarea scroll ?

    Reply
  24. Akshi
    Posted on May 28, 2015 at 10:41 Permalink

    Hi malihu,
    Thanks for nice plugin. I love your scrollbar.

    I have used this in my site
    http://skydevelopers.co/login/portfolio/

    I have little problem. The scrolling is not smoothly on responsive.

    Please help..

    ~akshi

    Reply
  25. Maria
    Posted on May 27, 2015 at 16:35 Permalink

    Hi,
    the scroll is working pretty good, but for some reason when the browser is re-sized the scroll bar is shown when is not needed.
    I have the content inside a responsive div. The issue happens when I add autoExpandHorizontalScroll into the script to deal with the change of size.

    If you have any idea why his can be happening I will appreciated it.

    (function ($) {
    Sys.Application.add_load(function () {
    $(“.uxScroll”).mCustomScrollbar({
    axis: “yx”,
    scrollButtons: { enable: true },
    theme: “dark-3”,
    advanced: { updateOnContentResize: true , updateOnBrowserResize: true , autoExpandHorizontalScroll: true },

    });
    });
    })(jQuery);

    Reply
    • maria
      Posted on May 27, 2015 at 17:11 Permalink

      It happens in all browsers but chrome

      Reply
  26. Carlos
    Posted on May 26, 2015 at 21:35 Permalink

    Hi, your scrollbar is working great but I’m running into a problem when I change the display of the elements which contains a div with your scroll to none and get them back, the scrollback simply disapears, any ideas of what I’m doing wrong?

    Reply
  27. Dilan
    Posted on May 26, 2015 at 16:02 Permalink

    Any idea why the scroller doesn’t work if I have a console open (Chrome)?

    Reply
    • malihu
      Posted on May 26, 2015 at 17:11 Permalink

      It should work (I have it open all the time when working on it). Maybe it’s just a CSS height issue? Does the same happens when you just decrease browser window height?

      Reply
  28. James
    Posted on May 26, 2015 at 08:36 Permalink

    Hi! Great scroller!

    I’m working on a body scroller and a div overlay with scroller.

    I’ve managed to get it working properly for the most part. Only problem is when I close the overlay the page will go back to the top for instance if the button was in the middle of the page and it opens upon closing it the page will go back to top. I notice that if I remove body height:100% and html height:100% both scroll bars will work but the body will no longer be the custom scroller just the overlay.

    I’ve setup an example at http://codepen.io/jamesmyers/pen/LVbRJx

    Any help would be apprciated.
    Thank you again and great scroller!
    -James

    Reply
    • malihu
      Posted on May 26, 2015 at 14:53 Permalink

      The issue occurs when you use the mouse-wheel on the overlay and you scroll beyond the top/bottom of its content.

      When you continue scrolling with the mouse-wheel, after the content has scrolled to the top/bottom position, the script scrolls its parent scrollbar (same behavior as browser’s default scrollbar), which is the scrollbar of the body.

      This behavior is handled by the mouseWheel:preventDefault option parameter. You can enable it like this:
      mouseWheel:{ preventDefault: true }
      to prevent the default behavior.

      Reply
      • James
        Posted on May 26, 2015 at 21:40 Permalink

        I see where you are going with that and that does make a little sense. However, when I applied this to the code

        $("body,#content-1").mCustomScrollbar({ theme: "minimal-dark", mouseWheel:{ preventDefault: true } });

        It didn’t seem to have any effect. I did some experimenting and found that placing the close button below the overlay content will allow the overlay to close properly and the original body content will stay in the correct position. However when the close button is in the top or above the content it will trigger the original body content to scroll back to the top.

        I will leave the codepen with the button at the top of the content so that you can see how it isn’t working properly.

        http://codepen.io/jamesmyers/pen/LVbRJx

        Thank you for your help!

        Reply
        • malihu
          Posted on May 27, 2015 at 14:51 Permalink

          I see.

          I think the issue happens because of the close button element. The script scrolls to this button on focus (default plugin behavior for form elements).

          Try using the autoScrollOnFocus option parameter to remove buttons from the elements list:
          advanced:{ autoScrollOnFocus: "input,textarea,select,datalist,keygen,a[tabindex],area,object,[contenteditable='true']" }

          Also, keep:
          mouseWheel:{ preventDefault: true }
          as it does have an effect (it prevents scrolling the body when modal is opened and scrolled beyond top/bottom).

          Reply
          • James
            Posted on May 28, 2015 at 02:56 Permalink

            This was the solution. Now body content stays in the same position once the overlay is activated and closed regardless of button close position.

            Thank you for the help! And great plugin! Thank you for providing people with something like this for free!

  29. Nic3108
    Posted on May 24, 2015 at 22:00 Permalink

    It pays to search through Google! Just found your answer on: https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/253

    Thank you! It works fine in IE now. Looks great!

    Reply
  30. Nic3108
    Posted on May 24, 2015 at 11:48 Permalink

    Hi, I love your scrollbar!! (I have a small problem).

    I’ve used it on several pages and it works fine. I’ve now added a blog in an iframe on one page; in Chrome, Safari etc. it works fine, but in IE, it won’t scroll the iframe using the mousewheel (have to manually drag the scrollbar).

    http://www.kasmill.co.uk/asparatestsite/aspararesponsive/newstest.html

    Any ideas why? Thank you.

    Reply
    • Hans Meiser
      Posted on June 3, 2015 at 10:13 Permalink

      IFRAMES – thats a good point, has anybody a idea or a solution for IE bigger 9 ?
      Thanks

      Reply

Comments pages: 1 63 64 65 66 67 83

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