This website uses cookies to personalise ads and to analyse traffic ok
web design

jQuery custom content scroller

jQuery custom content scroller

Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more.

Current version 3.1.5 (Changelog)
Upgrading from version 2

When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. One significant change is that you don’t need to call the update method manually (the script does it automatically). For more info see changelog.

Version 2 is still maintained and updated here.


How to use it

Get started by downloading the archive which contains the plugin files (and a large amount of HTML demos and examples). Extract and upload jquery.mCustomScrollbar.concat.min.js, jquery.mCustomScrollbar.css and mCSB_buttons.png to your web server (alternatively you can load plugin files from a CDN).

Instead of hosting the plugin files on your web server, you can load them directly from a CDN like jsdelivr, Github etc.

  • jsdelivr versioned/minified
    • //cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js
    • //cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css
    • //cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/mCSB_buttons.png
  • Github latest/minified
    • //malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js
    • //malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css
    • //malihu.github.io/custom-scrollbar/mCSB_buttons.png


HTML

Include jquery.mCustomScrollbar.css in the head tag your HTML document (more info)

jquery.mCustomScrollbar.css contains the styling of the custom scrollbar and themes. It should normally be included in the head tag of your html (typically before any script tags). If you wish to reduce http requests and/or have all your website stylesheet in a single file, you should move/copy scrollbars styling in your main CSS document.

mCSB_buttons.png contains all the button arrows (up, down, left and right) as image sprites for all scrollbar themes. The plugin archive contains the PSD source (source-files/mCSB_buttons.psd) so you can change them or add your own. This file should be in the same directory with plugin stylesheet.


<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />

Include jQuery library (if your project doesn’t use it already) and jquery.mCustomScrollbar.concat.min.js in the head tag or at the very bottom of your document, just before the closing body tag

Some frameworks and CMS include jQuery library in the head tag to make sure it’s loaded when other scripts request it. Usually, including .js files on the bottom of the HTML document (just before the closing body tag) is recommended for better performance. In any case, jQuery must be included first, before plugin scripts.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

CSS

The element(s) you want to add scrollbar(s) should have the typical CSS properties of an overflowed block which are a height (or max-height) value, an overflow value of auto (or hidden) and content long enough to require scrolling. For horizontal scrollbar, the element should have a width (or max-width) value set.

If you prefer to set your element’s height/width via javascript, you can use the setHeight/setWidth option parameters.

Initialization

Initialize via javascript

After files inclusion, call mCustomScrollbar function on the element selector you want to add the scrollbar(s)

<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

more info

The code is wrapped in (function($){ ... })(jQuery);. This ensures no conflict between jQuery and other libraries using $ shortcut (see Avoiding Conflicts with Other Libraries for more info). The plugin function is called in $(window).on("load") so it executes after all page elements (like images) are loaded.

You can change the function selector ".content" to any selector you want (an element id, class name, js variable etc.). For instance, if you want custom scrollbars to apply on the element with id content-1, you simply do:

$("#content-1").mCustomScrollbar();

You may also have multiple selectors by inserting comma separated values

$(".content,#content-1").mCustomScrollbar();

The above code adds custom scrollbars to a)every element with class name content and b)the element with id content-1.

Additionally, you may want to call mCustomScrollbar multiple times within a page in order to set different options (configuration and option parameters explained below) for each selector

<script>
  (function($){
    $(window).on("load",function(){
      $("#vertical-content").mCustomScrollbar({
        theme:"light-3",
        scrollButtons:{
          enable:true
        }
      });
      $("#horizontal-content").mCustomScrollbar({
        axis:"x",
        theme:"3d"
      });
    });
  })(jQuery);
</script>

Initialize via HTML

Add the class mCustomScrollbar to any element you want to add custom scrollbar(s) with default options. Optionally, set its axis via the HTML data attribute data-mcs-axis (e.g. "x" for horizontal and "y" for vertical) and its theme via data-mcs-theme. For example:

<div class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- your content -->
</div>

Basic configuration & option parameters

axis

By default, the script applies a vertical scrollbar. To add a horizontal or 2-axis scrollbars, invoke mCustomScrollbar function with the axis option set to "x" or "yx" respectively

$(".content").mCustomScrollbar({
    axis:"x" // horizontal scrollbar
});
$(".content").mCustomScrollbar({
    axis:"yx" // vertical and horizontal scrollbar
});

theme

To quickly change the appearance of the scrollbar, set the theme option parameter to any of the ready-to-use themes available in jquery.mCustomScrollbar.css, for example:

$(".content").mCustomScrollbar({
    theme:"dark"
});

Configuration

You can configure your scrollbar(s) using the following option parameters on mCustomScrollbar function
Usage $(selector).mCustomScrollbar({ option: value });

setWidth: false
Set the width of your content (overwrites CSS width), value in pixels (integer) or percentage (string).
setHeight: false
Set the height of your content (overwrites CSS height), value in pixels (integer) or percentage (string).
setTop: 0
Set the initial css top property of content, accepts string values (css top position).
Example: setTop: "-100px".
setLeft: 0
Set the initial css left property of content, accepts string values (css left position).
Example: setLeft: "-100px".
axis: "string"
Define content’s scrolling axis (the type of scrollbars added to the element: vertical and/of horizontal).
Available values: "y", "x", "yx".

  • axis: "y" – vertical scrollbar (default)
  • axis: "x" – horizontal scrollbar
  • axis: "yx" – vertical and horizontal scrollbars
scrollbarPosition: "string"
Set the position of scrollbar in relation to content.
Available values: "inside", "outside".
Setting scrollbarPosition: "inside" (default) makes scrollbar appear inside the element. Setting scrollbarPosition: "outside" makes scrollbar appear outside the element. Note that setting the value to "outside" requires your element (or parent elements) to have CSS position: relative (otherwise the scrollbar will be positioned in relation to document’s root element).
scrollInertia: integer
Set the amount of scrolling momentum as animation duration in milliseconds.
Higher value equals greater scrolling momentum which translates to smoother/more progressive animation. Set to 0 to disable.
autoDraggerLength: boolean
Enable or disable auto-adjusting scrollbar dragger length in relation to scrolling amount (same bahavior with browser’s native scrollbar).
Set autoDraggerLength: false when you want your scrollbar to (always) have a fixed size.
autoHideScrollbar: boolean
Enable or disable auto-hiding the scrollbar when inactive.
Setting autoHideScrollbar: true will hide the scrollbar(s) when scrolling is idle and/or cursor is out of the scrolling area.
Please note that some special themes like “minimal” overwrite this option.
autoExpandScrollbar: boolean
Enable or disable auto-expanding the scrollbar when cursor is over or dragging the scrollbar.
alwaysShowScrollbar: integer
Always keep scrollbar(s) visible, even when there’s nothing to scroll.

  • alwaysShowScrollbar: 0 – disable (default)
  • alwaysShowScrollbar: 1 – keep dragger rail visible
  • alwaysShowScrollbar: 2 – keep all scrollbar components (dragger, rail, buttons etc.) visible
snapAmount: integer
Make scrolling snap to a multiple of a fixed number of pixels. Useful in cases like scrolling tabular data, image thumbnails or slides and you need to prevent scrolling from stopping half-way your elements. Note that your elements must be of equal width or height in order for this to work properly.
To set different values for vertical and horizontal scrolling, use an array: [y,x]
snapOffset: integer
Set an offset (in pixels) for the snapAmount option. Useful when for example you need to offset the snap amount of table rows by the table header.
mouseWheel:{ enable: boolean }
Enable or disable content scrolling via mouse-wheel.
mouseWheel:{ scrollAmount: integer }
Set the mouse-wheel scrolling amount (in pixels). The default value "auto" adjusts scrolling amount according to scrollable content length.
mouseWheel:{ axis: "string" }
Define the mouse-wheel scrolling axis when both vertical and horizontal scrollbars are present.
Set axis: "y" (default) for vertical or axis: "x" for horizontal scrolling.
mouseWheel:{ preventDefault: boolean }
Prevent the default behaviour which automatically scrolls the parent element when end or beginning of scrolling is reached (same bahavior with browser’s native scrollbar).
mouseWheel:{ deltaFactor: integer }
Set the number of pixels one wheel notch scrolls. The default value “auto” uses the OS/browser value.
mouseWheel:{ normalizeDelta: boolean }
Enable or disable mouse-wheel (delta) acceleration. Setting normalizeDelta: true translates mouse-wheel delta value to -1 or 1.
mouseWheel:{ invert: boolean }
Invert mouse-wheel scrolling direction. Set to true to scroll down or right when mouse-wheel is turned upwards.
mouseWheel:{ disableOver: [array] }
Set the tags that disable mouse-wheel when cursor is over them.
Default value:
["select","option","keygen","datalist","textarea"]
scrollButtons:{ enable: boolean }
Enable or disable scrollbar buttons.
scrollButtons:{ scrollAmount: integer }
Set the buttons scrolling amount (in pixels). The default value "auto" adjusts scrolling amount according to scrollable content length.
scrollButtons:{ scrollType: "string" }
Define the buttons scrolling type/behavior.

  • scrollType: "stepless" – continuously scroll content while pressing the button (default)
  • scrollType: "stepped" – each button click scrolls content by a certain amount (defined in scrollAmount option above)
scrollButtons:{ tabindex: integer }
Set a tabindex value for the buttons.
keyboard:{ enable: boolean }
Enable or disable content scrolling via the keyboard.
The plugin supports the directional arrows (top, left, right and down), page-up (PgUp), page-down (PgDn), Home and End keys.
keyboard:{ scrollAmount: integer }
Set the keyboard arrows scrolling amount (in pixels). The default value "auto" adjusts scrolling amount according to scrollable content length.
keyboard:{ scrollType: "string" }
Define the keyboard arrows scrolling type/behavior.

  • scrollType: "stepless" – continuously scroll content while pressing the arrow key (default)
  • scrollType: "stepped" – each key release scrolls content by a certain amount (defined in scrollAmount option above)
contentTouchScroll: integer
Enable or disable content touch-swipe scrolling for touch-enabled devices.
To completely disable, set contentTouchScroll: false.
Integer values define the axis-specific minimum amount required for scrolling momentum (default: 25).
documentTouchScroll: boolean
Enable or disable document touch-swipe scrolling for touch-enabled devices.
advanced:{ autoExpandHorizontalScroll: boolean }
Auto-expand content horizontally (for "x" or "yx" axis).
If set to true, content will expand horizontally to accommodate any floated/inline-block elements.
Setting its value to 2 (integer) forces the non scrollHeight/scrollWidth method. A value of 3 forces the scrollHeight/scrollWidth method.
advanced:{ autoScrollOnFocus: "string" }
Set the list of elements/selectors that will auto-scroll content to their position when focused.
For example, when pressing TAB key to focus input fields, if the field is out of the viewable area the content will scroll to its top/left position (same bahavior with browser’s native scrollbar).
To completely disable this functionality, set autoScrollOnFocus: false.
Default:
"input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']"
advanced:{ updateOnContentResize: boolean }
Update scrollbar(s) automatically on content, element or viewport resize.
The value should be true (default) for fluid layouts/elements, adding/removing content dynamically, hiding/showing elements etc.
advanced:{ updateOnImageLoad: boolean }
Update scrollbar(s) automatically each time an image inside the element is fully loaded.
Default value is auto which triggers the function only on "x" and "yx" axis (if needed).
The value should be true when your content contains images and you need the function to trigger on any axis.
advanced:{ updateOnSelectorChange: "string" }
Update scrollbar(s) automatically when the amount and size of specific selectors changes.
Useful when you need to update the scrollbar(s) automatically, each time a type of element is added, removed or changes its size.
For example, setting updateOnSelectorChange: "ul li" will update scrollbars each time list-items inside the element are changed.
Setting the value to true, will update scrollbars each time any element is changed.
To disable (default) set to false.
advanced:{ extraDraggableSelectors: "string" }
Add extra selector(s) that’ll release scrollbar dragging upon mouseup, pointerup, touchend etc.
Example: extraDraggableSelectors: ".myClass, #myID"
advanced:{ releaseDraggableSelectors: "string" }
Add extra selector(s) that’ll allow scrollbar dragging upon mousemove/up, pointermove/up, touchend etc.
Example: releaseDraggableSelectors: ".myClass, #myID"
advanced:{ autoUpdateTimeout: integer }
Set the auto-update timeout in milliseconds.
Default timeout: 60
theme: "string"
Set the scrollbar theme.
View all ready-to-use themes
All themes are contained in plugin’s CSS file (jquery.mCustomScrollbar.css).
Default theme: "light"
callbacks:{
      onCreate: function(){}
}
A function to call when plugin markup is created.
Example:
callbacks:{
    onCreate:function(){
      console.log("Plugin markup generated");
    }
}
callbacks:{
      onInit: function(){}
}
A function to call when scrollbars have initialized (demo).
Example:
callbacks:{
    onInit:function(){
      console.log("Scrollbars initialized");
    }
}
callbacks:{
      onScrollStart: function(){}
}
A function to call when scrolling starts (demo).
Example:
callbacks:{
    onScrollStart:function(){
      console.log("Scrolling started...");
    }
}
callbacks:{
      onScroll: function(){}
}
A function to call when scrolling is completed (demo).
Example:
callbacks:{
    onScroll:function(){
      console.log("Content scrolled...");
    }
}
callbacks:{
      whileScrolling: function(){}
}
A function to call while scrolling is active (demo).
Example:
callbacks:{
    whileScrolling:function(){
      console.log("Scrolling...");
    }
}
callbacks:{
      onTotalScroll: function(){}
}
A function to call when scrolling is completed and content is scrolled all the way to the end (bottom/right) (demo).
Example:
callbacks:{
    onTotalScroll:function(){
      console.log("Scrolled to end of content.");
    }
}
callbacks:{
      onTotalScrollBack: function(){}
}
A function to call when scrolling is completed and content is scrolled back to the beginning (top/left) (demo).
Example:
callbacks:{
    onTotalScrollBack:function(){
      console.log("Scrolled back to the beginning of content.");
    }
}
callbacks:{
      onTotalScrollOffset: integer
}
Set an offset for the onTotalScroll option.
For example, setting onTotalScrollOffset: 100 will trigger the onTotalScroll callback 100 pixels before the end of scrolling is reached.
callbacks:{
      onTotalScrollBackOffset: integer
}
Set an offset for the onTotalScrollBack option.
For example, setting onTotalScrollBackOffset: 100 will trigger the onTotalScrollBack callback 100 pixels before the beginning of scrolling is reached.
callbacks:{
      alwaysTriggerOffsets: boolean
}
Set the behavior of calling onTotalScroll and onTotalScrollBack offsets.
By default, callback offsets will trigger repeatedly while content is scrolling within the offsets.
Set alwaysTriggerOffsets: false when you need to trigger onTotalScroll and onTotalScrollBack callbacks once, each time scroll end or beginning is reached.
callbacks:{
      onOverflowY: function(){}
}
A function to call when content becomes long enough and vertical scrollbar is added.
Example:
callbacks:{
    onOverflowY:function(){
      console.log("Vertical scrolling required");
    }
}
callbacks:{
      onOverflowX: function(){}
}
A function to call when content becomes wide enough and horizontal scrollbar is added.
Example:
callbacks:{
    onOverflowX:function(){
      console.log("Horizontal scrolling required");
    }
}
callbacks:{
      onOverflowYNone: function(){}
}
A function to call when content becomes short enough and vertical scrollbar is removed.
Example:
callbacks:{
    onOverflowYNone:function(){
      console.log("Vertical scrolling is not required");
    }
}
callbacks:{
      onOverflowXNone: function(){}
}
A function to call when content becomes narrow enough and horizontal scrollbar is removed.
Example:
callbacks:{
    onOverflowXNone:function(){
      console.log("Horizontal scrolling is not required");
    }
}
callbacks:{
      onBeforeUpdate: function(){}
}
A function to call right before scrollbar(s) are updated.
Example:
callbacks:{
    onBeforeUpdate:function(){
      console.log("Scrollbars will update");
    }
}
callbacks:{
      onUpdate: function(){}
}
A function to call when scrollbar(s) are updated.
Example:
callbacks:{
    onUpdate:function(){
      console.log("Scrollbars updated");
    }
}
callbacks:{
      onImageLoad: function(){}
}
A function to call each time an image inside the element is fully loaded and scrollbar(s) are updated.
Example:
callbacks:{
    onImageLoad:function(){
      console.log("Image loaded");
    }
}
callbacks:{
      onSelectorChange: function(){}
}
A function to call each time a type of element is added, removed or changes its size and scrollbar(s) are updated.
Example:
callbacks:{
    onSelectorChange:function(){
      console.log("Scrollbars updated");
    }
}
live: "string"
Enable or disable applying scrollbar(s) on all elements matching the current selector, now and in the future.
Set live: true when you need to add scrollbar(s) on elements that do not yet exist in the page. These could be elements added by other scripts or plugins after some action by the user takes place (e.g. lightbox markup may not exist untill the user clicks a link).
If you need at any time to disable or enable the live option, set live: "off" and "on" respectively.
You can also tell the script to disable live option after the first invocation by setting live: "once".
liveSelector: "string"
Set the matching set of elements (instead of the current selector) to add scrollbar(s), now and in the future.

Plugin methods

Ways to execute various plugin actions programmatically from within your script(s).

update

Usage $(selector).mCustomScrollbar("update");

Call the update method to manually update existing scrollbars to accommodate new content or resized element(s). This method is by default called automatically by the script (via updateOnContentResize option) when the element itself, its content or scrollbar size changes.

view examples

/* initialize plugin with auto-update options disabled */
$(selector).mCustomScrollbar({
  advanced:{
    updateOnContentResize: false,
    updateOnImageLoad: false
  }
});

/* at some point in your js script/code update scrollbar manually */
$(selector).mCustomScrollbar("update");

scrollTo

Usage $(selector).mCustomScrollbar("scrollTo",position,options);

Call the scrollTo method to programmatically scroll the content to the position parameter (demo).

position parameter

Position parameter can be:

  • "string"
    • e.g. element selector: "#element-id"
    • e.g. special pre-defined position: "bottom"
    • e.g. number of pixels less/more: "-=100"/"+=100"
  • integer
    • e.g. number of pixels: 100
  • [array]
    • e.g. different y/x position: [100,50]
  • object/function
    • e.g. jQuery object: $("#element-id")
    • e.g. js object: document.getelementbyid("element-id")
    • e.g. function: function(){ return 100; }

Pre-defined position strings:

  • "bottom" – scroll to bottom
  • "top" – scroll to top
  • "right" – scroll to right
  • "left" – scroll to left
  • "first" – scroll to the position of the first element within content
  • "last" – scroll to the position of the last element within content

view examples

Scroll to element with id “#el-1″

$(selector).mCustomScrollbar("scrollTo","#el-1");

Scroll to top

$(selector).mCustomScrollbar("scrollTo","top");

Scroll by 100 pixels down or right

var val=100;
$(selector).mCustomScrollbar("scrollTo","-="+val);

Scroll by 100 pixels up or left

$(selector).mCustomScrollbar("scrollTo","+=100");

Scroll by 100 pixels down and by 50 pixels right

$(selector).mCustomScrollbar("scrollTo",["-=100","-=50"]);

Scroll to the fifth paragraph

$(selector).mCustomScrollbar("scrollTo",$("p:eq(4)"));

Scroll to the last element within your content

$(selector).mCustomScrollbar("scrollTo","last");

Scroll to some variable value

var val=document.getelementbyid("element-id");
$(selector).mCustomScrollbar("scrollTo",val);

Scroll to 300 pixels

$(selector).mCustomScrollbar("scrollTo",300);

Method options

scrollInertia: integer
Scroll-to duration, value in milliseconds.
Example:
$(selector).mCustomScrollbar("scrollTo","bottom",{
    scrollInertia:3000
});
scrollEasing: "string"
Scroll-to animation easing, values: "linear", "easeOut", "easeInOut".
Example:
$(selector).mCustomScrollbar("scrollTo","bottom",{
    scrollEasing:"easeOut"
});
moveDragger: boolean
Scroll scrollbar dragger (instead of content).
Example:
$(selector).mCustomScrollbar("scrollTo",80,{
    moveDragger:true
});
timeout: integer
Set a timeout for the method (the default timeout is 60 ms in order to work with automatic scrollbar update), value in milliseconds.
Example:
$(selector).mCustomScrollbar("scrollTo","top",{
    timeout:1000
});
callbacks: boolean
Trigger user defined callbacks after scroll-to completes.
Example:
$(selector).mCustomScrollbar("scrollTo","left",{
    callbacks:false
});

stop

Usage $(selector).mCustomScrollbar("stop");

Stops any running scrolling animations (usefull when you wish to interupt a previously scrollTo method call).

disable

Usage $(selector).mCustomScrollbar("disable");

Calling disable method will temporarily disable the scrollbar (demo). Disabled scrollbars can be re-enable by calling the update method.

To disable the scrollbar and reset its content position, set the method’s reset parameter to true

$(selector).mCustomScrollbar("disable",true);

view examples

/* initialize plugin */
$(selector).mCustomScrollbar();

/* at some point in your js script/code disable scrollbar */
$(selector).mCustomScrollbar("disable");

/* re-enable scrollbar as needed */
$(selector).mCustomScrollbar("update");

destroy

Usage $(selector).mCustomScrollbar("destroy");

Calling destroy method will completely remove the custom scrollbar and return the element to its original state (demo).

view examples

/* initialize plugin */
$(selector).mCustomScrollbar();

/* at some point in your js script/code destroy scrollbar */
$(selector).mCustomScrollbar("destroy");

Scrollbar styling & themes

You can design and visually customize your scrollbars with pure CSS, using jquery.mCustomScrollbar.css which contains the default/basic styling and all scrollbar themes.

The easiest/quickest way is to select a ready-to-use scrollbar theme. For example:

$(selector).mCustomScrollbar({
  theme:"dark"
});

View all ready-to-use themes

You can modify the default styling or any theme either directly in jquery.mCustomScrollbar.css or by overwriting the CSS rules in another stylesheet.

Creating a new scrollbar theme

Create a name for your theme (e.g. “my-theme”) and set it as the value of the theme option

$(selector).mCustomScrollbar({
    theme:"my-theme"
});

Your element will get the class “mCS-my-theme” (your theme-name with “mCS” prefix), so you can create your CSS using the .mCS-my-theme in your rules. For instance:

.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }
.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ background-color: white; } 
/* and so on... */

In the same manner you can clone any existing theme (e.g. “dark”), change its selector (e.g. .mCS-dark) to your own theme name (e.g. .mCS-my-theme) and modify its CSS rules.

Scrollbar markup

The plugin applies specific id (unique) and/or classes to every scrollbar element/component, meaning that you can target and modify any scrollbar in more than one ways.

For example, every element with a scrollbar gets a unique class in the form of _mCS_1, _mCS_2 etc. Every scrollbar container element gets a unique id in the form of mCSB_1_scrollbar_vertical, mCSB_2_scrollbar_vertical etc. Every scrollbar dragger gets a unique id in the form of mCSB_1_dragger_vertical, mCSB_2_dragger_vertical etc. in addition to the class mCSB_dragger. All these mean that you can do stuff like:

._mCS_1 .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }

._mCS_2 .mCSB_dragger .mCSB_dragger_bar{ background-color: green; }

#mCSB_3_dragger_vertical .mCSB_dragger_bar{ background-color: blue; }

#mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; }

#mCSB_1_scrollbar_horizontal .mCSB_dragger{ width: 100px; }

.mCSB_1_scrollbar .mCSB_dragger .mCSB_draggerRail{ width: 4px; }

Custom scrollbar layout

User-defined callbacks

You can trigger your own js function(s) by calling them inside mCustomScrollbar callbacks option parameter

$(".content").mCustomScrollbar({
    callbacks:{
        onScroll:function(){
            myCustomFn(this);
        }
    }
});

function myCustomFn(el){
    console.log(el.mcs.top);
}

In the example above, each time a scroll event ends and content has stopped scrolling, the content’s top position will be logged in browser’s console. There are available callbacks for each step of the scrolling event:

  • onScrollStart – triggers the moment a scroll event starts
  • whileScrolling – triggers while scroll event is running
  • onScroll – triggers when a scroll event completes
  • onTotalScroll – triggers when content has scrolled all the way to bottom or right
  • onTotalScrollBack – triggers when content has scrolled all the way back to top or left

You can set an offset value (pixels) for both onTotalScroll and onTotalScrollBack by setting onTotalScrollOffset and onTotalScrollBackOffset respectively (view example).

The following will trigger the callback function when content has scrolled to bottom minus 100 pixels

$(".content").mCustomScrollbar({
    callbacks:{
        onTotalScroll:function(){
            console.log("scrolled to bottom");
        },
    onTotalScrollOffset:100
    }
});

By default, onTotalScroll and onTotalScrollBack callbacks are triggered repeatedly. To prevent multiple calls when content is within their offset, set alwaysTriggerOffsets option to false (view example).

$(".content").mCustomScrollbar({
    callbacks:{
        onTotalScroll:function(){
            console.log("scrolled to bottom");
        },
    onTotalScrollOffset:100,
    alwaysTriggerOffsets:false
    }
});

Additional callbacks:

Returning values

The script returns a number of values and objects related to scrollbar that you can use in your own functions

  • this – the original element containing the scrollbar(s)
  • this.mcs.content – the original content wrapper as jquery object
  • this.mcs.top – content’s top position (pixels)
  • this.mcs.left – content’s left position (pixels)
  • this.mcs.draggerTop – scrollbar dragger’s top position (pixels)
  • this.mcs.draggerLeft – scrollbar dragger’s left position (pixels)
  • this.mcs.topPct – content vertical scrolling percentage
  • this.mcs.leftPct – content horizontal scrolling percentage
  • this.mcs.direction – content’s scrolling direction (y or x)

view examples

Load more content when scrolled to bottom

$(selector).mCustomScrollbar({
    callbacks:{
        onTotalScroll:function(){
            this.mcs.content.append("...");
        }
    }
});

Run code when at least half of the content is scrolled

$(selector).mCustomScrollbar({
    callbacks:{
        whileScrolling:function(){
            var pct=this.mcs.topPct;
            if(pct>=50){
              /* do something... */
            }
        }
    }
});

Plugin-specific jQuery expressions

$("#myID:mcsInView")
Select element(s) in your content that are within scrollable viewport.
As condition: $("#myID").is(":mcsInView");
$(".content:mcsOverflow")
Select overflowed element(s) with visible scrollbar.
As condition: $(".content").is(":mcsOverflow");
$("#myID:mcsInSight")
$("#myID:mcsInSight(exact)")
Select element(s) in your content that are in view of the scrollable viewport. Using the exact parameter will include elements that have any part of them (even 1 pixel) in view of the scrollable viewport.
As condition: $("#myID").is(":mcsInSight");, $("#myID").is(":mcsInSight(exact)");

Plugin dependencies & requirements

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT

Pages: 1 2 3 4


5,618 Comments

Post a comment

Comments pages: 1 76 77 78 79 80 84

  1. کلینیک کاشت مو و ابرو
    Posted on November 27, 2016 at 21:26 Permalink

    thank you very nice

    Reply
  2. Paul
    Posted on November 24, 2016 at 18:53 Permalink

    Hi there,

    Great plugin but have an issue with it working on a MS Surface IE11. For both touch and trackpad.

    This is on a fixed div with text content.

    Works on all other devices, so just after some advice

    Reply
    • paul
      Posted on November 24, 2016 at 19:22 Permalink

      Hmm, used your Drag Mod Code below and can now use the touch on the Surface. Although you have to touch twice so a bit hit and miss.

      Still cannot get the trackpad scroll to work though. Had to happen on a Windows device 🙂 Android, iOS are all fine.

      Reply
  3. Matt
    Posted on November 24, 2016 at 01:40 Permalink

    Hello there, you did good job with creating this.
    I got a question. How can i set my horizontal full-width area to autoscroll from left to right? I tryied to edit one of examples of yours but that doesn’t work for me

    Reply
    • malihu
      Posted on November 27, 2016 at 20:40 Permalink

      Try the following code example:

      $(window).on("load",function(){ var content=$("#content-1"), //element selector loopDuration=14000, //loop duration e.g. 7s to right, 7s to left totalLoops=2; //number of loops: 0 for infinite loops content.mCustomScrollbar({ //your scrollbar options... //auto-scroll via plugin's callabacks callbacks:{ onInit:function(){ setTimeout(function(){ _autoScroll("right"); totalLoops-- },100); }, onTotalScroll:function(){ if($(this).data("mCS").trigger==="external"){ _autoScroll("left"); } }, onTotalScrollBack:function(){ if($(this).data("mCS").trigger==="external" && totalLoops){ _autoScroll("right"); totalLoops-- } } } }); function _autoScroll(to){ content.mCustomScrollbar("scrollTo",to,{scrollInertia:loopDuration/2,easing:"easeInOutSmooth"}); } });

      Hope this helps

      Reply
  4. Ezequiel
    Posted on November 18, 2016 at 01:30 Permalink

    Hi,

    how can I make the content scrolleable with grab the mouse and drag? … similar to the “hand tool” on photoshop.

    It will be great to add this feature to the plugin!!

    Thanks!

    Reply
  5. Andrei Diaconescu
    Posted on November 16, 2016 at 17:26 Permalink

    Hello,

    Great plugin,

    I would need to know, can i use for the scroll of the full page ?
    If yes, how ?

    Thank you !

    Reply
  6. Patrick
    Posted on November 15, 2016 at 16:16 Permalink

    I’ve copied your ‘iframe_exemple.html’ in root dir and moved css in ../styles dir and js in ../scripts.
    I’ve modified the html changing
    ‘../jquery.mCustomScrollbar.min.css’ to ‘ ../styles/jquery.mCustomScrollbar.min.css’

    and

    ‘../jquery.mCustomScrollbar.concat.min.js’ to ‘../scripts/jquery.mCustomScrollbar.concat.min.js)

    to set correctly references on css and js…. but the iframe reduce to zero !!!!

    On original it’s perfect!

    Reply
  7. Simon
    Posted on November 10, 2016 at 18:47 Permalink

    Hi Malihu,

    Thanks alot for your great work, your scrollbar works well. Only issue I found is that when i search a page using browser find, it won’t scroll to the position of the result.

    In the changelog for version 3.0.5 I found this:
    Oct 21, 2014
    Updated the script to allow using browser’s “find on page” functionality.

    What do I need to change in my implementation to make browser find work?

    Thanks in advance

    Reply
    • malihu
      Posted on November 12, 2016 at 12:01 Permalink

      Hello,

      Unfortunately the browsers behavior has changed since version 3.0.5. They no longer scroll overflow hidden elements to keywords found (which was the case back in 2014).

      Since the custom scrollbar uses this CSS property (overflow:hidden) and because there’s no actual javascript event to detect when a user triggers the “Find in page” feature, it’s impossible to make it work (at least for now).

      This browsers behavior might change again in the future cause it is broken as it is now. For example the browser will report and cycle through all instances it finds, but the “hidden” ones won’t appear on the screen (like the browser saying “I found the word but I’m showing you where it is”)

      Reply
      • Simon
        Posted on November 14, 2016 at 01:34 Permalink

        Thank you very much for your quick response!

        Best regards, Simon

        Reply
  8. Adil
    Posted on November 10, 2016 at 13:21 Permalink

    Hi Malihu,

    Can we position the dragbar only at the top of the content instead of the bottom of the content in case of horizontal scrollbar?

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

      Sure. Everything is done via CSS.

      In jquery.mCustomScrollbar.css horizontal scrollbar position is set in line 156. You need to set its top property to 0 and its bottom property to auto.

      It’s usually better to overwrite the CSS rules you want in your own stylesheet though. For instance:

      #your-element-id .mCSB_scrollTools.mCSB_scrollTools_horizontal{ top: 0; bottom: auto; }

      Depending on the scrollbar theme and options you’ve set, you may also need to change the scrollbar margin in accordance to the (now below) content, e.g.:

      #your-element-id .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-bottom: 0; margin-top: 30px; }

      Reply
  9. Jerry
    Posted on November 9, 2016 at 09:53 Permalink

    Hi there,

    I would like to ask if it’s possible to position the scrollbar to left instead of right?

    Thank you. 🙂

    Reply
  10. don
    Posted on November 8, 2016 at 15:39 Permalink

    Hello Malihu,

    I have noticed, that when custom scrollbar is applied to whole body, the scroller stutters and lags when mouse wheel is being scrolled very repeatedly (in a spam manner). I think what happens, is that while scroll is still in the “inertia” or “smooth” scroll mode, and if another scroll is made during that period, it tries to scroll further, but the previous scroll (that was still in progress) resets the scroll.

    But when it is applied to any other elements, this issue doesn’t occur, even if you spam the mouse wheel as hard as you can.

    Is there any way to fix this?

    Reply
    • don
      Posted on November 8, 2016 at 15:45 Permalink

      EDIT. I think this also happens on other elements also, but it’s just not so noticeable.

      Reply
    • malihu
      Posted on November 12, 2016 at 10:42 Permalink

      This might depend on the type of content scrolled which affects performance. Do you notice the same on the demos and examples?

      Reply
      • don
        Posted on November 13, 2016 at 13:52 Permalink

        No, this doesn’t happen on examples. I have checked those.

        Reply
        • don
          Posted on November 13, 2016 at 13:54 Permalink

          Or I am wrong. Actually it does. Checked more demos, and you can feel it. Maybe you don’t feel it so huge as in my page, but it is noticeable even in examples. Hmm..

          Reply
  11. Jing Li
    Posted on November 7, 2016 at 08:52 Permalink

    how can I apply the scrollbar to the textarea?

    Reply
    • malihu
      Posted on November 7, 2016 at 20:23 Permalink

      Textarea elements need extra code. See textarea_example.html in plugin archive.

      Reply
      • Jing Li
        Posted on November 8, 2016 at 04:07 Permalink

        So the textarea can only be scrolled by cursor not the mouse wheel?

        Reply
        • malihu
          Posted on November 12, 2016 at 10:26 Permalink

          Sorry, you’re right. I need to update the examples. You need to remove the "textarea" value from mouseWheel:disableOver option

          So in the example, change mCustomScrollbar function call to:
          $(".textarea-wrapper").mCustomScrollbar({ scrollInertia:0, theme:"dark-3", advanced:{autoScrollOnFocus:false}, mouseWheel:{disableOver:["select","option","keygen","datalist",""]}, keyboard:{enable:false}, snapAmount:textareaLineHeight });

          Reply
  12. Lalir Jisoria
    Posted on November 4, 2016 at 18:28 Permalink

    How can we use it for drop down ?

    Reply
  13. AndyRed
    Posted on November 3, 2016 at 08:11 Permalink

    Hello! I found scrolling problems in IE8 , scrolling speed goes too slow. How to resolve this? Thank you!

    Reply
    • Zafar
      Posted on November 4, 2016 at 13:53 Permalink

      By stop using IEs

      Reply
    • malihu
      Posted on November 7, 2016 at 20:36 Permalink

      Hello,

      Please define “slow”. Is the mouse-wheel scrolling slow or is it slow regarding performance?

      Mouse-wheel speed can be adjusted using the mouseWheel options.

      If it’s about performance, you cannot do much with IE8 and basically you shouldn’t spend time optimizing for such browsers. Anyone that’s still using IE8 has much bigger problems than slow scrolling (you basically cannot surf the web with IE8 anymore, that’s why its usage is so low).

      If you still want to cater for IE8 users, I’d suggest to add an HTML condition and use the browser’s native scrollbar for IE8.

      Reply
  14. Zefer
    Posted on October 31, 2016 at 20:57 Permalink

    Ive been fighting this for some time…

    I have a code:
    <div class="ajaxlist"></div>
    And I update the inner content (a UL list) via JQuery Ajax when I click on certain objects in my page.
    I use $('.ajaxlist').mCustomScrollbar() after any Ajax call. The problem is that next time I click on an object, I get the standard browser scrollbar. Why? Because the inner DIVs created by customScrollBar are gone (the Ajax call removes the content) and even though I call mCustomScrollbar() again it is not updated because apparently “.ajaxlist” still contains other classes “mCustomScrollbar _mCS_9”. I tried to use “update” with similar results. If I call “destroy” and start again from scratch, it works sometimes, but others I get a JS error of undefined… The “live” option does not help, because I am not removing “ajaxlist”. If I use $('.ajaxlist ul').mCustomScrollbar({live: true}) it is all messed up because DIVs are created inside the UL. What can I do?

    Reply
    • malihu
      Posted on October 31, 2016 at 21:35 Permalink

      See this FAQ:
      http://manos.malihu.gr/jquery-custom-content-scroller/4/#faq-4

      You can also see the ajax_example.html inside plugin’s archive.

      I don’t know why you get the error using the destroy method (maybe you need to add a timeout before re-initializing the scrollbar) but I’d need to see your code in order to help.

      In any case, if you simply load/append your ajax content inside .mCSB_container element, everything should work.

      Reply
  15. Aleksa Toljic
    Posted on October 31, 2016 at 20:16 Permalink

    hi malihu,
    i have a problem with nested scrollbars
    somethimes when i want to click inside a nested datatable on some button it just scrolls me to the top of the not nested one

    I am using primefaces 6.0.7

    maybe you can help me with this problem.

    Reply
    • malihu
      Posted on October 31, 2016 at 20:22 Permalink

      Hi,

      If the element you click is button, you may want to change the default value of autoScrollOnFocus option parameter in order to remove the “button” from the string

      advanced:{ autoScrollOnFocus: "input,textarea,select,datalist,keygen,a[tabindex],area,object,[contenteditable='true']" }

      Reply
      • Aleksa Toljic
        Posted on November 1, 2016 at 11:49 Permalink

        wow, thanks man.

        Reply
  16. Steven
    Posted on October 31, 2016 at 02:29 Permalink

    Would be nice to have an option to set custom callbacks specific to “scrollTo” method

    Reply
    • malihu
      Posted on October 31, 2016 at 15:51 Permalink

      You can differentiate callbacks for the scrollTo method by using plugin’s trigger object. For example:

      $(selector).mCustomScrollbar({ callbacks:{ onScroll:function(){ if($(this).data("mCS").trigger==="external"){ //scrollTo method callback functions }else{ //standard callback functions } } } });

      Reply
  17. mrlaseptima
    Posted on October 30, 2016 at 01:27 Permalink

    why my scroll buttons are hidden ??? 🙁

    Reply
    • malihu
      Posted on October 30, 2016 at 20:09 Permalink

      Have you enabled them?

      $(selector).mCustomScrollbar({ scrollButtons:{ enable: true } });

      Reply
  18. Evo
    Posted on October 28, 2016 at 14:47 Permalink

    Thanks for the wonderful plugin!

    Just wondering how can I reload it again after postback. Coz everytime theres a postback, my scrollbar goes back to its original look. (Using asp.net ajax)

    Thanks in advace!

    Reply
    • malihu
      Posted on October 30, 2016 at 20:17 Permalink

      Do you load new content inside your element with scrollbars? If yes, then check the following FAQ:
      http://manos.malihu.gr/jquery-custom-content-scroller/4/#faq-4

      You need to load the new content inside the .mCSB_container element (instead directly to the element you called mCustomScrollbar function).

      Reply
      • Evo
        Posted on October 31, 2016 at 05:46 Permalink

        Thanks for the reply but still have issue:
        it throws error on –> f.insertRule(e[c]+”}”,f.cssRules.length)

        ***This is for initialize. I’m using Master page that is why I have BodyContentPlaceHolder. This works like a charm during first load, but once theres a postback, its a different story.

        (function ($) {
        $(window).on(“load”, function () {

        $(“#BodyContentPlaceHolder_panelLeft”).mCustomScrollbar({
        theme: “minimal-dark”
        });

        });
        })(jQuery);

        function reload() {
        $(“#BodyContentPlaceHolder_panelLeft”).mCustomScrollbar({
        theme: “minimal-dark”
        });

        }

        ***In every server postback I try calling it again. It works for 1sec and it reverted back to original scroll bar. For some reason in order for me to make css change permanent after postback, I have to do it on codebehind like for instance adding of css to button to be active, selected my code would be.

        myBtn.Attributes.Add(“class”, “btActive btSelected”)

        is there a way to apply the same way like?
        panelLeft.Attributes.Add(“class”, “what would be my class to change scroll bar”)

        Thanks Again!

        Reply
        • malihu
          Posted on October 31, 2016 at 16:44 Permalink

          If you load/append new content inside the .mCSB_container element, you normally don’t have to reload the scrollbar.

          But if you still need to reload/re-initialize the scrollbar, you have to destroy it first. For example:

          function reload() { //destroy scrollbar $("#BodyContentPlaceHolder_panelLeft").mCustomScrollbar("destroy"); //re-initialize scrollbar $("#BodyContentPlaceHolder_panelLeft").mCustomScrollbar({ theme: "minimal-dark" }); }

          Reply
  19. Dan Tyler
    Posted on October 24, 2016 at 19:57 Permalink

    Hello, I want to disable mouse wheel scrolling and then enable it later, how do I do this?

    I tried to set the scrollAmount to 0 at first, then update it but it doesn’t update.
    $.mCustomScrollbar({ mouseWheel : { scrollAmount : 0 // this works } })
    then I tried to update it at a later time:
    $.mCustomScrollbar({ mouseWheel : { scrollAmount : 100 // doesn't work } })

    Reply
    • malihu
      Posted on October 27, 2016 at 19:10 Permalink

      The first part is correct 😉
      Try the following:

      //scrollar initialization $(selector).mCustomScrollbar({ mouseWheel:{ scrollAmount:0 } }); //At some point later... $(selector).data("mCS").opt.mouseWheel.scrollAmount="auto";

      In general, you can change most options on-the-fly via the "mCS" data object
      $(selector).data("mCS").opt.optionName;

      Reply
  20. Vipin Dhulia
    Posted on October 19, 2016 at 13:13 Permalink

    Hello Malihu,
    I’m trying your great plug-in for one of my site. I have disabled the scroll bars in case of mobile devices…the function is working without any issues. All scroll bars are disabled in mobile. Only issue that content is still scrolling inside the mCustomScrollbar on touch enabled devices.

    Will you please send me some suggestion so that content will not scroll when plugin is disabled.


    Warm regards
    Vipin

    Reply
    • malihu
      Posted on October 20, 2016 at 19:13 Permalink

      Hello,

      Not sure how you detect and disable the custom scrollbar…
      Are your elements CSS overflow property set to auto? Do you disable them based on some script or via media queries?

      In any case, I’ve done this before and in order to detect a mobile device you’ll need an extra plugin, for example mobile-detect.
      You could then do something like this:

      <script src="http://cdnjs.cloudflare.com/ajax/libs/mobile-detect/0.4.3/mobile-detect.min.js"></script>

      <script> (function($){ var md=new MobileDetect(window.navigator.userAgent); $(window).load(function(){ if(!md.mobile()){ $(selector).mCustomScrollbar(); } }); })(jQuery); </script>

      Not sure if the above is what you need but let me know

      Reply
  21. Dana
    Posted on October 18, 2016 at 19:13 Permalink

    I want to display custom scroll bar for below text area, But i am not able to set the custom scroll bar by using mCustomScroll plugin.

    $(“#gainTextarea”).mCustomScrollbar({
    setHeight:340,
    theme:”#7E8B8C”,
    width:25
    });

    Reply
  22. softmaster
    Posted on October 13, 2016 at 10:36 Permalink

    I have animation on website that scroller moves. Can I underheise whether the onScrollStart: function () {
    Console.log ( “scroll start manuel?”);
    },
    Was autoscroller or user has mause moved really?

    Reply
  23. carlos
    Posted on October 9, 2016 at 08:30 Permalink

    no puedo usar esta libreria, no se como implementarla

    Reply
  24. Martin Ushima
    Posted on October 7, 2016 at 19:06 Permalink

    Hello,

    I’m adding a dynamically created table to a div element (the container scrollbar).

    I’m trying to scroll to an item in the table once it gets selected, but I’m getting this error:

    Unable to get property ‘offsetTop’ of undefined or null reference.
    jquery.mCustomScrollbar.concat.min.js (6,34714)

    Every time an item is selected I reload the table and setup the scrollbar again.

    Thank in advance for any assistance.

    Reply
    • malihu
      Posted on October 20, 2016 at 18:51 Permalink

      Hi,
      Need to see your code in order to help.

      Reply
  25. Konstantin
    Posted on October 6, 2016 at 08:33 Permalink

    Hello Malihu,

    I am trying add second horisontal scrollbar for the one block. One in top and other in bottom of the block. Can I do it with mCustomScrollbar?

    Can someone help me?

    Reply
  26. Santosh Dhonde
    Posted on October 6, 2016 at 05:07 Permalink

    Hi, I am using this plugin in my new dashboard, I have used it twice in inner of outer scroll it’s inner scroll not working there is a mCS_no_scrollbar class appearing for example I want to use it as follows

    firsrScroll working properly but second one not working.

    please provide solution if you have

    Reply
    • malihu
      Posted on October 20, 2016 at 18:48 Permalink

      mCS_no_scrollbar class means that the element does not have a height set or maybe that it needs a fixed-pixel height value.

      Reply
  27. J
    Posted on October 4, 2016 at 00:47 Permalink

    hello, I’m doing a chat panel.. how can I do to always have the scroll on down position?

    Reply
    • malihu
      Posted on October 4, 2016 at 03:50 Permalink

      Use plugin’s scrollTo method. In your app, after you receive each response call the method like this:

      $(selector).mCustomScrollbar("scrollTo","bottom");

      Reply
  28. Mondaye
    Posted on September 27, 2016 at 19:49 Permalink

    Hello,

    You scrollbars are wonderfull and work fine, but the problem is I can’t get rid of the ugly one that is set by default.
    Which means I have you design and ergonomic one on the left… and the other on the right.

    Since I’m kind of a beginner with jqueries, I wondered if you could help me to solve this problem. I would be very grateful.

    Yours,

    Mondaye

    PS: I’m french so I hope that what I said make sense to you. ^^

    Reply
    • Mondaye
      Posted on September 27, 2016 at 23:19 Permalink

      Actually I finally manage to get it worked.
      I put the attribute on auto instead of scroll and set the height as well as the max height (it didn’t worked without an height).

      Now my website look much better, thanks a lot.

      Reply
      • malihu
        Posted on October 2, 2016 at 19:35 Permalink

        Yes, setting overflow to auto is the most common way. You can also set it to hidden if you want to completely avoid seeing broswer’s default scrollbar while page is loading.

        Reply
  29. Pritesh
    Posted on September 27, 2016 at 15:42 Permalink

    Hey Malihu,

    Thanks for this awesome plugin. I was trying to load everything from CDN, but i am not sure how should i load image sprite from CDN in my page.
    //cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/mCSB_buttons.png

    Can anyone help me.

    Reply
    • malihu
      Posted on October 2, 2016 at 19:42 Permalink

      You don’t need to include mCSB_buttons.png image in your page. It’s referenced in jquery.mCustomScrollbar.min.css and exists within the same directory (//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.5/).

      You should also use the latest version from jsdelivr cdn by changing 3.0.6 to 3.1.5.

      Reply
      • Xianzixiang
        Posted on October 20, 2016 at 11:59 Permalink

        hello malihu,

        Thanks for this wonderful plugin. Now I am wondering how to get the customscrollbar ‘s direction. for example, while I scroll axis for “Y”, how can I know it is downward or upword?

        Only by the param (this.mcs.top ) decrease or increase?

        Reply
        • malihu
          Posted on October 20, 2016 at 19:27 Permalink

          Yes. For example:

          var yDir; $(selector).mCustomScrollbar({ callbacks:{ onScrollStart:function(){ yDir=this.mcs.top; }, onScroll:function(){ if(yDir>this.mcs.top){ console.log("scrolled down"); }else if(yDir<this.mcs.top){ console.log("scrolled up"); } } } });

          Reply
  30. Gabriele
    Posted on September 21, 2016 at 21:21 Permalink

    Hello Malihu,
    I’m trying your great plug-in for my news site. I created a box that works in autoscroll. He stops at mouseover and resumes mouseleave. So far this is perfect. I wanted to enter a timeout early to allow time to read the first news before the scroll begins, but I can not. Wherever I insert the time-out or does not work or the scroll no part at all. I enclose the script. If you can help me I really would be a great pleasure. Thank you.

    <!DOCTYPE html> <!--[if IE 8 ]><html lang="en" class="ie8"><![endif]--> <!--[if IE 9 ]><html lang="en" class="ie9"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>jQuery custom scrollbar demo</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- stylesheet for demo and examples --> <link rel="stylesheet" href="style.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <!-- custom scrollbar stylesheet --> <link rel="stylesheet" href="../jquery.mCustomScrollbar.css"> </head> <body> <!-- content --> <div id="content-1" class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p> <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p> <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p> <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> <hr /> <p>End of content.</p> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="../js/minified/jquery-1.11.0.min.js"><\/script>')</script> <!-- custom scrollbar plugin --> <script src="../jquery.mCustomScrollbar.concat.min.js"></script> <script> (function($){ $(window).load(function(){ var content=$("#content-1"),autoScrollTimer=20000,autoScrollTimerAdjust,autoScroll; content.mCustomScrollbar({ scrollButtons:{enable:true}, callbacks:{ whileScrolling:function(){ autoScrollTimerAdjust=autoScrollTimer; }, onScroll:function(){ if($(this).data("mCS").trigger==="internal"){AutoScrollOff();} } } }); content.addClass("auto-scrolling-on auto-scrolling-to-bottom"); AutoScrollOn("bottom"); $("#content-1").mouseenter(function(e){ e.preventDefault(); if(content.hasClass("auto-scrolling-on")){ AutoScrollOff(); } }); $("#content-1").mouseleave(function(){ AutoScrollOn("bottom",autoScrollTimer-autoScrollTimerAdjust); }); function AutoScrollOn(to,timer){ if(!timer){timer=autoScrollTimer;} content.addClass("auto-scrolling-on").mCustomScrollbar("scrollTo",to,{scrollInertia:timer,scrollEasing:"linear"}); autoScroll=setTimeout(function(){ },timer); } function AutoScrollOff(){ clearTimeout(autoScroll); content.removeClass("auto-scrolling-on").mCustomScrollbar("stop"); } }); })(jQuery); </script>

    Reply
    • GABRIELE
      Posted on September 22, 2016 at 13:57 Permalink

      Solved. If you are interested in sending you the code. Also because this example there is in your demo. But I not if even if you saw this post, so expect you to tell me if you are interested or not. Ciao amico mio. 🙂

      Reply
      • malihu
        Posted on September 23, 2016 at 11:30 Permalink

        Yes I saw it. Send me your solution if you like. Did you used plugin’s onInit callback or something else?

        Reply

Comments pages: 1 76 77 78 79 80 84

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php