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 62 63 64 65 66 84

  1. Joel
    Posted on May 23, 2015 at 18:31 Permalink

    Hi,

    I’ve managed to get the custom scrollbar to work on a nested div but it seems to not want to play on the

    Here is a link: test page

    (view with browser wider than 770px)

    Any ideas? Thanks!

    Reply
    • Joel
      Posted on May 23, 2015 at 18:32 Permalink

      I typed the tag body at the end of the first sentence in my original message and it was clearly read as code so vanished when posting… 🙂

      Reply
      • malihu
        Posted on May 23, 2015 at 23:18 Permalink

        When posting code in comments, it’s better to place it in code tags (see available HTML tags below comment textarea).

        To apply the custom scrollbar on the body tag, just set html height to 100% (at the moment you only have it on the body):
        html{ height: 100%; }

        You’ll also need to set the body overflow to hidden (to completely hide the default scrollbar):
        body{ overflow: hidden; }

        Reply
  2. Caio Oliveira
    Posted on May 22, 2015 at 19:24 Permalink

    Hello Malihu,
    thank you for the great plugin but i have a little question…
    My header has a background-image:

    CSS:
    “background: url(../img/image-bg-white.jpg) 50% 0 no-repeat center top fixed;
    height: 100% !important;”

    i’m having conflit with your plugin, can you help me?
    “center” hide my background-image
    and “height:100%” cut my background-image

    PLUGIN-SETTINGS:

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

    $(“body”).mCustomScrollbar({
    theme:”dark-thin”,
    scrollButtons: { enable: true },
    });

    });
    })(jQuery);

    Thank you my friend!
    sorry for my bad english

    Reply
    • malihu
      Posted on May 22, 2015 at 21:40 Permalink

      Hello,

      Can you send me a test page with the issue?

      Reply
      • Caio
        Posted on May 23, 2015 at 01:46 Permalink

        Thank you for your attention!
        i upload to github my project(under constuction).

        project: http://caiooliveiras.github.io/tymalihu/

        look the #header, my “height: 100%” of background-image is not working properly with your plugin..

        css:
        #header { min-width: 100%; height: 100%; background: url(../img/image-bg-white.jpg) center center no-repeat fixed; webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; z-index: -3; overflow: hidden; }

        Thank you again!

        Reply
        • malihu
          Posted on May 23, 2015 at 10:38 Permalink

          The #header’s 100% height value is the one that causing this, because its parent element is not the body. It’s parent container becomes the plugin’s wrapper (.mCSB_container) which needs to have an height value set to “auto” in order for the scrollbar to work.

          There are more than one workarounds for this but the easiest is setting #header height to viewport units instead of percentage:
          #header { min-width: 100vh; height: 100vh; }

          You could also do the same with jQuery if you need to support old browsers, e.g.:
          $(window).resize(function(){ $("#header").css("height",$(this).height()); }

          Reply
          • Caio Oliveira
            Posted on May 23, 2015 at 13:14 Permalink

            Malihu, you’re a genius!!!
            it worked!
            thank you so much

  3. Alex
    Posted on May 22, 2015 at 14:35 Permalink

    Hello ) Thanks for plugin. I have a question: can I apply it for all web page and change the main scrollbar.
    Such code doesn’t work:
    $(document).ready(function() { $(window).load(function() { $('html').mCustomScrollbar({ theme: "inset-3-dark" }); }); });

    Would be glad for your answer!

    Reply
    • malihu
      Posted on May 22, 2015 at 15:57 Permalink

      Use “body” instead:
      $('body').mCustomScrollbar();

      Plugin archive contains an example (full_page_demo.html) of what you want to do 😉
      https://github.com/malihu/malihu-custom-scrollbar-plugin/blob/master/examples/full_page_demo.html

      Reply
      • Alex
        Posted on May 22, 2015 at 20:57 Permalink

        Thanks for your answer. It works. But I collided with another problem: some of my others scripts stopped work. I can’t find any regularity between two groups of scripts: which works and which doesn’t work. I use jQ, jQ UI and bootstrap.js. Thanks.

        Reply
        • malihu
          Posted on May 22, 2015 at 21:40 Permalink

          I can’t really help with this as I don’t know which script does what. Maybe you need to apply the custom scrollbar last, after other scripts do their thing(?)

          Reply
  4. Eugen
    Posted on May 21, 2015 at 17:08 Permalink

    Hi ! I set from start “setTop”:”-9999px” after if i toggle parent div (hide/show), setTop value set to 0 . How can I do that all the time “setTop” = “-9999px”

    Reply
    • Eugen
      Posted on May 21, 2015 at 17:39 Permalink

      updateOnContentResize – will not help , because I load content with ajax …

      Reply
    • malihu
      Posted on May 21, 2015 at 17:43 Permalink

      You’ll have to use the scrollTo method after your div is shown (after animation, if any, is complete):
      $(selector).mCustomScrollbar("scrollTo","bottom");

      Reply
      • Eugen
        Posted on May 22, 2015 at 09:08 Permalink

        Thank for response ) and for plugin 😉 have a nice day !

        Reply
  5. Alex
    Posted on May 19, 2015 at 15:12 Permalink

    Hello.
    I have a problem in fixing header of the table. The option “snapOffset ” is not working.
    $(“.customContentScrollbar”).mCustomScrollbar({
    theme: “dark-3”,
    scrollButtons: { enable: true },
    snapOffset: 30,
    mouseWheelPixels: 250
    });

    I will be glad to receive your advice.
    Alex.

    Reply
  6. Simon
    Posted on May 18, 2015 at 19:47 Permalink

    Hello dear Manos Malihu,

    I have used your fantastic custom scrollbar script.
    But my implementation in this script “.mCustomScrollbar” has failed.
    Please can you tell me what is wrong in this modified script?

    My target: “scrollback-button”

    Thanks a lot and best regards,

    Simon 🙂

    (function($){ $(window).load(function(){ $(‘.txtpd_cntnr_rct’).mCustomScrollbar({
    theme:’light-thick’, scrollButtons:{enable:true}, scrollbarPosition:’outside’,

    callbacks: {
    whileScrolling:function() {

    var pct=this.mcs.topPct;
    if(pos>=50) {

    $(‘.go-top’).fadeIn(200);
    } else {
    $(‘.go-top’).fadeOut(200);
    }
    }
    }
    });

    });

    $(‘.go-top’).click(function(event) {
    event.preventDefault();
    })

    })(jQuery);

    Reply
    • malihu
      Posted on May 20, 2015 at 01:59 Permalink

      I think you need to change:
      pos
      to:
      pct
      as pos variable is not defined.

      Reply
      • Simon
        Posted on May 20, 2015 at 12:51 Permalink

        Hi Malihu,

        Thanks for your help, It works correctly with the “pct” declaration now!

        Have a nice time.

        Yours,

        Simon 🙂

        Reply
  7. Andreu
    Posted on May 17, 2015 at 22:06 Permalink

    Hi. Anyone know how could I synchronize two scrolls? I have a website with two scrolls and I want to enable the possibility that when clicking a button I want this two scrolls to synchronize. When the scrolls are synced, the second scroll should follow the first one when scrolling it and viceversa. Thank you!

    Reply
  8. Max
    Posted on May 16, 2015 at 22:02 Permalink

    How to enable only Smoothy scroll engine code without Custom theme of scrollbar, with the default browser scroolbars? 😉

    Reply
  9. Thomas
    Posted on May 16, 2015 at 16:54 Permalink

    Hi Malihu,

    I posted a comment but I cant find it. Did you delete it and why?

    My question is if it is possible to use different offset values for different screen widths. I have a fixed menu on top and the height changes when the screen width is lower than 600px.

    Thank you

    Reply
  10. ian
    Posted on May 15, 2015 at 09:14 Permalink

    Hi malihu,

    thanks for your super plugin! It would be cool if you can answer my following questions:

    1. what is option to set scroller on bottom in default? so that we can scroll from bottom to top in default.

    2. did you check scroller on slack? their scroller is great when a new chat tile is added to content list. It seems they only increase height of scroller when it reach one defined condition. In addition, scroller always keep on bottom when new message come in. With your plugin, I noticed a quick flash.

    Reply
    • malihu
      Posted on May 15, 2015 at 10:34 Permalink

      Hello,

      1. You can use setTop option parameter and inserting any value that exceeds scrolling limit, e.g.
      setTop: "-9999px"

      or use the scrollTo method after scrollbar initialization:
      $(selector).mCustomScrollbar("scrollTo","bottom");

      2. You can fine-tune the scrollTo method to trigger instantly like this:
      $(selector).mCustomScrollbar("scrollTo","bottom",{ scrollInertia:0, timeout:0 });

      Reply
  11. Richard
    Posted on May 14, 2015 at 17:12 Permalink

    Hi malihu, I’m having a problem with the mousewheel scrolling on Firefox, its scrolling by very little pixels. Can you replicate the problem?

    Reply
    • malihu
      Posted on May 14, 2015 at 20:31 Permalink

      Yes, mouse-wheel delta on Firefox is a bit lower than say Chrome (at least in Windows). In general, mouse-wheel scrolling is affected by many factors (OS, browser, input device etc.).

      You can use plugin’s scrollAmount option parameter to set a fixed scrolling amount (in pixels), e.g.
      mouseWheel:{ scrollAmount: 60 }

      Reply
      • Richard
        Posted on May 19, 2015 at 01:50 Permalink

        Yep, I’m on Windows.

        Okay that will have to do then, even though I found the auto value to be pretty accurate to what I wanted.

        Thanks 🙂

        Reply
  12. Paolo
    Posted on May 13, 2015 at 10:22 Permalink

    Hi i’m fan of your scrollbar, i’m trying to implement this on the site that i’m working on and i have this result:

    http://www.awesomescreenshot.com/image/216313/ead416f597baf62d7f6922bee06ccbc4

    Using Chrome i can hide the default scrollbar that appears on the side of the new scrollbar, via css:

    p::-webkit-scrollbar{
    background:transparent;
    width:0px;
    }

    but i can’t hide it on firefox, i really need your help, what i’m trying to achieve is without the default scrollbar on the side, just the new one like this:

    http://www.awesomescreenshot.com/image/216348/5d3bc82e0f306d86d6ee4ecbe3bca031

    Thanks!

    Reply
    • malihu
      Posted on May 13, 2015 at 20:16 Permalink

      I think that you have to set your element’s CSS to:
      overflow: hidden;
      It’s value is probably “auto” so just change it to “hidden”.

      Reply
  13. Michael
    Posted on May 11, 2015 at 18:37 Permalink

    Hey,

    How to chande distance to sproll ?
    My website has 3000px height.
    As soon as the wheel turn around time is a page advances by 520px.

    Thanks

    Reply
    • malihu
      Posted on May 11, 2015 at 22:05 Permalink

      The plugin provides a number of option parameters for setting/modifying mouse-wheel scrolling. You can use the mouseWheel scrollAmount option paraneter to set a fixed value for mouse-wheel. For example:
      mouseWheel:{ scrollAmount: 100 }

      Reply
  14. amar
    Posted on May 11, 2015 at 15:25 Permalink

    Scrolls very slow on Opera relative to other browsers.

    Reply
    • Amar
      Posted on May 11, 2015 at 15:50 Permalink

      Got the solution

      mouseWheel:{ scrollAmount: integerValue }

      Reply
  15. jine
    Posted on May 11, 2015 at 12:54 Permalink

    i want to recreate scrollbar for particular div but scroll is not working

    Reply
    • jine
      Posted on May 11, 2015 at 12:58 Permalink

      i want to recreate on on click function but scroll is not set to it

      Reply
    • malihu
      Posted on May 11, 2015 at 22:06 Permalink

      I need more info in order to help (either a link or your code)

      Reply
      • jine
        Posted on May 13, 2015 at 11:05 Permalink

        the scroll is getting conflict so i want to remove the scroll and recreate a new scroll

        Reply
        • malihu
          Posted on May 13, 2015 at 20:22 Permalink

          To remove the custom scrollbar, you can use the destroy method in your script(s):
          $(selector).mCustomScrollbar("destroy");

          To re-create it after it’s destroyed:
          $(selector).mCustomScrollbar();

          Reply
          • jine
            Posted on May 14, 2015 at 08:32 Permalink

            i tried but its again conflictes n div contebt is not getting visnbled

        • malihu
          Posted on May 14, 2015 at 20:32 Permalink

          I’ll need to see a link or your code in order to help

          Reply
  16. David Grant
    Posted on May 11, 2015 at 02:39 Permalink

    Hi
    Great plug-in!
    I’m having problems making just the vertical dragger bar (light-2 theme) a fixed size but retaining its draggable top to bottom of it’s container.
    Implementing autoDraggerLength: ‘false’ doesn’t seem to work.
    Sorry if this is an old question.
    Dave

    Reply
    • malihu
      Posted on May 11, 2015 at 05:20 Permalink

      Hi,

      You have to set autoDraggerLength option to false and set the dragger height you want via CSS. The CSS rule is on line 106 of jquery.mCustomScrollbar.css.

      Reply
      • David Grant
        Posted on May 11, 2015 at 22:56 Permalink

        Perfect!
        Thanks.

        D

        Reply
  17. Thomas
    Posted on May 7, 2015 at 15:44 Permalink

    Hej malihu!

    I’ve updated to 3.0.8 of your plugin to get the fix to be scrollable horizontally, if the slider is vertically (see your comment here: http://stackoverflow.com/a/26496368/4323473). This works on good on the samsung internet browser, the sailfish and other browsers. But I didn’t get it working on the chrome on Android. Can you confirm this problem and do you have an idea how to fix it?

    Yours,
    Thomas

    Reply
    • malihu
      Posted on May 7, 2015 at 18:26 Permalink

      Hi,

      This is a known issue with Android Chrome. I’ll try to fix this on the next version (can’t really say when though).

      Reply
      • Thomas
        Posted on May 8, 2015 at 08:44 Permalink

        Ah, okay … Thx for informing. Can you give me a hint or workaround to fix it for now, or are you still trying to find the problem?

        Reply
  18. JV
    Posted on May 7, 2015 at 01:31 Permalink

    Hi, do you have a better way of making the scrollbar not take any space? I used “outside” and that does it, but the scrollbar moves, I would like it to be position inside but prevent it from taking up space. I know how to fix this but I’m wondering if theres a better way.

    Reply
    • JV
      Posted on May 7, 2015 at 01:35 Permalink

      Never-mind, I can’t imagine a better way than removing margin-right: 30px; from #.mCSB_inside > .mCSB_container

      Reply
      • malihu
        Posted on May 7, 2015 at 02:07 Permalink

        Yeap, that’s the best way 😉

        Reply
  19. Miguel
    Posted on May 6, 2015 at 00:42 Permalink

    Hello, I really like the scroll, it works fine on my environment but I got one question: is it posible to scale the width of the scrollbar (in a horizontal scroll)? Because I have a container at 100% width and don’t want to use the scrollbar at 100% of the container, I’ll like to put it in the middle of the container maybe at 50% percent the real width.

    Thanks to much in advance.

    Reply
  20. Ciprian
    Posted on April 30, 2015 at 16:07 Permalink

    Well, this plugin seems to cause other problems too. When I install some forum plugins which add some extra buttons, it makes those plugins add the buttons twice. If I disable this plugin, the forum plugins work right. Could be some issue with something executing twice on the page? I took a look at the timeline in the dev console, but didn’t see anything to give me a clue which part of the custom scroller could be causing this.

    Reply
    • malihu
      Posted on May 3, 2015 at 22:55 Permalink

      I can’t really help with this as I don’t know your page, markup, scripts etc. Maybe you could load your forum plugins first and then custom scrollbar?

      Reply
  21. Ciprian
    Posted on April 29, 2015 at 19:53 Permalink

    Hey there, thanks for the plugin. I am running into an issue though. I wrote a small script using jQuery’s scrollTop() method, but it doesn’t work, although it works on a page I tested locally. If I disable your plugin, it starts working. I’ve also tried to enable jQuery to work in no conflict mode, because I thought maybe the page is losing the jQuery object reference. Didn’t work either. My script was basically monitoring the position of the scrollbar and hiding or showing the navbar depending on this position. At this point, I’m thinking this must be caused because your plugin disabled the default window scroll bar and created some custom ones. Is that right? What is the name of those objects and how can I detect the position of this custom scrollbar to be able to have navbar toggling events?
    Thanks.

    Reply
    • malihu
      Posted on May 3, 2015 at 22:31 Permalink

      Yes that’s right. scrollTop() works only with browser’s native scrollbar.

      The plugin provides the scrollTo method along with callbacks and objects so you can do whatever you want in your script(s). For more info see:

      Methods: scrollTo
      User-defined callbacks

      Reply
  22. François
    Posted on April 29, 2015 at 18:35 Permalink

    Hello there, I love your plugin

    I’m trying to figure out how to use the scrollto function on window load. For some reason, it seems to work differently depending on the browser. On Firefox, the anchor link points out successfully to the element id, but then when I scroll it goes right up to the top of the page. On Chrome, it doesn’t work at all and I arrive directly at the top of the page.

    To be more precise, I’m using PHP, and trying to link from one page to a specific anchor of another page. And the anchor is dynamic, like this :

    on Page 1

    on Page 2.

    Can you help towards a solution ? Thank you and much appreciated.

    Reply
    • François
      Posted on April 30, 2015 at 11:04 Permalink

      In fact now that I try again (maybe it was a caching pb), it works the same both on Chrome and FF. The anchor seems to work fine as I arrive at the specific div on window load. But unfortunately, as soon as I start scrolling from there, it goes straight up to the top of the page. It doesn’t appear as if the scroll bar exists at all on window load, only when I start scrolling from the top. Any ideas ?

      Reply
      • François
        Posted on April 30, 2015 at 16:34 Permalink

        Curiouslu enough,

        http://mywebsite.com/xxx/test.html#p285 on window load => doesn’t work

        but the same anchor #p285 with no window load, staying on the same page=> works.

        is there a pb during the page loading that makes the scroll to go straight up ?

        Reply
    • malihu
      Posted on May 3, 2015 at 23:08 Permalink

      To make anchor links like #id work with custom scrollbar you need to use a custom script which will call plugin’s scrollTo method.

      If your links point to the same page, you can use the function described here in your script:
      http://manos.malihu.gr/code-example/scroll-to-id-within-element-with-custom-scrollbars/

      If you need to scroll to the hash in the browser’s address bar (to/from a different page), you could do something like:
      <script> (function($){ $(window).load(function(){ $(selector).mCustomScrollbar(); //scrollbar initialization //use plugin's scrollTo method to scroll-to location hash var to=window.location.hash.replace("/",""); //get hash (element id) $(selector).mCustomScrollbar("scrollTo",to); //call scrollTo }); })(jQuery); </script>

      Hope this helps

      Reply
  23. artgu
    Posted on April 29, 2015 at 17:14 Permalink

    Hello,

    First thanks for this great plugin !
    I only have a little question, I didn’t find how can I define the dragger bar width in pixel ? When I did it through CSS the dragger bar it doesn’t go completely to the left and right.

    Thanks for your help !

    Reply
  24. Vadim
    Posted on April 29, 2015 at 14:14 Permalink

    Hello, i have one problem with your plug-in. When I initialized your plug-in, my cpu begin work on 15% higher or even more. Sorry for my english 🙂 I have i7 2,4 GHz

    Reply
    • malihu
      Posted on April 29, 2015 at 14:38 Permalink

      Hello,

      This depends on many things (e.g. amount of scrollbars, content etc.) but the plugin has some functions enabled by default which you might not need. Try for example to disable updateOnImageLoad:
      advanced:{ updateOnImageLoad: false }
      and check again your CPU usage.

      Let me know if this helps

      Reply
      • xiao
        Posted on May 16, 2015 at 10:28 Permalink

        Hi, I have the same problem with this plug-in. I found endless loop in the source code, and I do not know how to config it. Need your help. Thank you.

        Reply
  25. AndyW
    Posted on April 29, 2015 at 14:13 Permalink

    Only the visible content of the scroller is printed. Is there a simple way to print the full content of the scroller? Many thanks for any help on this.

    Reply
  26. John Jaider Vanegas
    Posted on April 28, 2015 at 21:12 Permalink

    Wow Dios!! el plugin está genial!!! Muchas gracias!! Saludos desde colombia! 😉

    Reply
  27. Saranya
    Posted on April 28, 2015 at 15:21 Permalink

    For me the script is runnning continuously and gettting long script error in IE. whereas it is not happenning in Chrome.. Any idea why i am gettting error in mcustomscroll.js. Pls help me.!

    Reply
  28. Dzo
    Posted on April 28, 2015 at 13:20 Permalink

    Hello ! great plugin but I can’t set it to slow down scroll speed on mobile device? (android/chrome) I want user to be forced to scroll down multiple times before reaching end/bottom of page not to be able to do just one swipe and reach end/bottom.

    Can you help me?

    Reply
  29. Andy
    Posted on April 27, 2015 at 20:38 Permalink

    Hey Malihu,

    I love your plugin and great work on it! I just have a question about what would you recommend is the best to deal with cross-browser/device compatibility? I generally have a few issues adjusting the scroll-speed to be at the same rate when:

    1. The content changes and the scrollbar gets larger (I kind of know how to deal with this, but it’d be great if you have some small snippet of an example of handling that :D)
    2. The user is using some other browser/OS that causes the scroll event to trigger a lot of times and it seems much faster than what I’m seeing.

    Reply
  30. Scott
    Posted on April 23, 2015 at 15:05 Permalink

    Great plugin, I’ve managed to mess around with it for the main scrollbar in the body and it works perfectly however when trying to add a custom scrollbar for a div tag the default scrollbar remains.
    I also tried initializing it by wrapping the div in another for the scrollbar but that just made the entire scrollbar disappear, any ideas as to where I’m going wrong?

    here’s my css for the div and my html (the message’s div gets its content from js)

    <body> <div id="card"> <div id="messages"> </div><!-- Messages --> ... <!-- Javascript --> <script> (function($){ $(window).load(function(){ $("#messages").mCustomScrollbar({ theme:"dark-2" }); }); })(jQuery); </script> ... #messages{ margin-left: 6%; width: 88%; height: 80%; padding: 5px; overflow: auto; margin-top: 1%; margin-bottom: 1%; }

    Thanks for any help

    Reply
    • malihu
      Posted on April 23, 2015 at 23:54 Permalink

      Hello,

      Since #messages height is set in percentage, you also need to set a (fixed) height for its parent(s) element.

      Does this help?

      Reply
      • Scott
        Posted on April 28, 2015 at 15:26 Permalink

        thanks worked a charm!

        Reply

Comments pages: 1 62 63 64 65 66 84

Post a comment

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

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

css.php