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 64 65 66 67 68 84

  1. Prasenjit
    Posted on July 4, 2015 at 18:14 Permalink

    Hello Malihu,

    When the HTML contents are coming from ajax response, the scroll option is not working as it was suppose to start from bottom.

    The same thing is working for static contents

    I am using the code like below,

    $(window).load(function(){

    $(“.ut_chmid”).mCustomScrollbar({
    autoHideScrollbar:false,
    });

    $(“.ut_chmid”).mCustomScrollbar(“scrollTo”,”bottom”, {
    scrollInertia:10,
    live: true
    });

    });

    I tried with ” live: true ” parameters, but no luck….

    I am waiting for your reply.

    Thanks,

    Reply
  2. Muhammad Nehal
    Posted on July 4, 2015 at 01:19 Permalink
  3. Muhammad Nehal
    Posted on July 4, 2015 at 01:11 Permalink

    hi malihu, i have a problem,,
    please guide me that, the scrollbar is not be showing in a body but when i create a seperate div and it gives height and width so then show scrollbar,, but i want to see in a body scrollbar,,,

    Reply
  4. Ciprian
    Posted on July 1, 2015 at 22:24 Permalink

    Hi. Is this plugin compatible with any free paralax plugin? I’ve tried to use it with Skrollr and they don’t work together. I get either one to work, or the other. It might be because they are both using the same methods to customise scrolling on the page.

    The result looks like this (testing page): http://eso-community.net/page/scroller

    If i disable this line it works:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.9/jquery.mCustomScrollbar.concat.min.js"></script>

    By “it works” I mean the parallax plugin works, but not the smooth scrolling plugin.

    Is there any way to make them compatible? Maybe make sure they load at different times or somehow their effects on the page stay separated.

    Reply
  5. josako
    Posted on July 1, 2015 at 17:50 Permalink

    hello everyone!
    can anyone please help me how to put scrollbar on my website by using body as selector in jquery code

    Reply
  6. Brendan
    Posted on June 30, 2015 at 16:47 Permalink

    Hi Malihu,

    I was wondering if u have experience with combining your (AWESOME) scrollbar plugin and ScrollSpy. The ScrollSpy plugin is for automatically updating nav targets based on scroll position but it doesn’t work anymore when I implement your plugin code into my project. Do you have a solution or do you know the answer?

    Best regards,

    Brendan

    Reply
  7. Dennis
    Posted on June 30, 2015 at 10:32 Permalink

    Hi Malihu,

    Great job with the stuff here, and the design is awesome too!

    I tried to find something, or edit the CSS, but wasn’t able to figure it out. I need your help, please.
    When I click and drag the ... dragger_bar, when I move the cursor outside of the container while dragging, it makes the whole scrollbar disappear in fade (I assume it’s opacity 0), but I wasn’t able to find what exactly causes it, and how to disable it. Can you give me a hint?

    Reply
  8. hmlt
    Posted on June 30, 2015 at 05:27 Permalink

    scrollTo does not scroll up all the way. It always scrolls up a certain amount, but never fully up. How can I fix this?

    Reply
  9. Assaf
    Posted on June 29, 2015 at 19:32 Permalink

    Hey,

    What about if the user wants to zoom in or out using ctrl + mouse wheel?
    How can I disable it when the user pushes on ctrl?

    Thanks,
    Assaf

    Reply
  10. Zarah Khan
    Posted on June 28, 2015 at 23:03 Permalink

    Hi, firstly thank you for this great-looking plugin. But sadly it is not working for me yet.

    I have followed all the steps. I have posted a question (with a small example) Stackoverflow here. I’ll be grateful if you can look into it?

    Reply
    • malihu
      Posted on June 29, 2015 at 22:59 Permalink

      The JSFiddle you made works with latest jQuery (not with edge!).

      Reply
      • Zarah Khan
        Posted on June 30, 2015 at 15:09 Permalink

        Thank you for your reply. It works partially with that, as the scroll bars do appear but they won’t scroll. You can see it here.

        Reply
      • Zarah Khan
        Posted on June 30, 2015 at 15:13 Permalink

        Thank you for your reply. It works ‘partially’ with that, i.e. the scroll bars do show up but they won’t scroll. You can see it here.

        Reply
        • malihu
          Posted on July 9, 2015 at 23:22 Permalink

          Scrolling works well for me(?)

          Reply
  11. zia
    Posted on June 28, 2015 at 21:11 Permalink

    dear I Can not changed the position of scroll bar so that i could used this software in my site please tel me the code where i cant set the position in my website and please tell me about the file thx i shell be very thankfull to u for this act of kindness

    Reply
    • zia
      Posted on June 28, 2015 at 21:13 Permalink

      dear I Can not changed the position of scroll bar so that i could not used this software in my site please tel me the code where i can set the position in my website and please tell me about the file thx i shell be very thankfull to u for this act of kindness

      Reply
    • malihu
      Posted on June 29, 2015 at 23:02 Permalink

      Scrollbar position, appearance etc. is set via CSS in jquery.mCustomScrollbar.css. There are also few options for positioning like scrollbarPosition.

      Reply
      • zia
        Posted on July 6, 2015 at 15:10 Permalink

        sorry boss scroll bar did not respond when set the positions in the css file i am in trouble please show me the code sinapit and set the position left 0 and top 0 thxx

        Reply
  12. Nic3108
    Posted on June 27, 2015 at 21:08 Permalink

    Hi, I love your scroller, it really something to my site. I do have a problem, which I can’t fix! I have a slick thumbnail slider on the page, which opens to a Colorbox carousel. In most browsers it works fine, but in IE11, it sometimes doesn’t open the carousel but opens a single image. In Developer tools, the only bug found is:

    return f.advanced.updateOnSelectorChange&&(m=r(),m!==w)?(l(3),void(w=m)):(f.advanced.updateOnContentResize&&(p=[h.outerHeight(!1),h.outerWidth(!1),v.height(),v.width(),_()[0],_()[1]],(p[0]!==S[0]||p[1]!==S[1]||p[2]!==S[2]||p[3]!==S[3]||p[4]!==S[4]||p[5]!==S[5])&&(l(p[0]!==S[0]||p[1]!==S[1]),S=p)),f.advanced.updateOnImageLoad&&(g=n(),g!==b&&(h.find("img").each(function(){i(this)}),b=g)),void((f.advanced.updateOnSelectorChange||f.advanced.updateOnContentResize||f.advanced.updateOnImageLoad)&&o()
    Anonymous function [Line: 4, Col: 29276],

    jquery.mCustomScrollbar.concat.min.js

    Do you have any idea if this would affect the opening of the slider in IE11? The fancybox code and scroller code are in the same lightbox folder. I’m not a programmer, as you can probably gather!

    Reply
  13. Yana
    Posted on June 26, 2015 at 19:27 Permalink

    Hi Malihu,

    Your plugin looks really great! I’d love to use it, unfortunately I run into the issue trying to put a horizontal scroll. Here is my code:

    <head> <link rel="stylesheet" type="text/css" href="/global/scrollbar_plugin/jquery.mCustomScrollbar.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="/global/scrollbar_plugin/jquery.mCustomScrollbar.concat.min.js"></script> <script> (function($){ $(window).load(function(){ $("#test").mCustomScrollbar({ axis: "x" }); }); })(jQuery); </script> </head> <body> <div id="test" class="mCustomScrollbar" data-mcs-theme="dark" style="width: 20%; height: 20%;"> ...some text... </div> </body>

    it makes a vertical scroll though. Checked on Firefox 31.6.0 and Chrome 43.0

    I’d really appreciate any help!

    Reply
  14. Cristhian Guerrero
    Posted on June 25, 2015 at 23:06 Permalink

    Great job with the plugin.

    I’d like to know if there is a way to use it with textAreas…

    Reply
  15. Eugen
    Posted on June 25, 2015 at 15:12 Permalink

    Hi , thanks for your great plugin !
    I have a problem . I made message box , and i’m using callback “onTotalScrollBack” for infinite scroll and i append new message in container , how i can save position and stay in place all time when loaded new messages ?! TY for help !

    Reply
  16. Arthur
    Posted on June 23, 2015 at 17:43 Permalink

    How to use the plugin if I need to put a scrollbar into a wrapper without fixed height? If a parent is a without defined manually height, the plugin won’t work when the page is resized.

    Reply
    • Arthur
      Posted on June 23, 2015 at 17:53 Permalink

      Just found the solution. If you had the same problem, you could use the hack on window resize, which will make parent wrapper height to be the same as .mCSB_container

      Reply
  17. Richard
    Posted on June 22, 2015 at 18:14 Permalink

    Hi malihu, sorry to bother you again.

    Can you please help me? The scrollbar stopped working after implementing ajax to load the scrollbar div, I tried setting live: true and also liveSelector: ‘.selector’ but it doesnt show the scrollbar after its done loading. But I can see the scrollbar in the dev tools.

    Reply
    • malihu
      Posted on June 29, 2015 at 22:34 Permalink

      Hi,

      Can you send me a link (or your code)?

      Reply
  18. miguel monraz
    Posted on June 22, 2015 at 07:16 Permalink

    Hi Malihu,

    Your plugin is great but I wonder if you have a version or theme which puts the scroll on the left side on the content as I need it like that

    Regards,
    Miguel Monraz

    Reply
    • malihu
      Posted on June 29, 2015 at 22:32 Permalink

      The appearance and position of the scrollbar is set via CSS. Open jquery.mCustomScrollbar.css (it contains comments to help users).

      For vertical scrollbars go to line 65 and remove:
      right: 0;
      from .mCSB_scrollTools selector. This will place the scrollbar on the left of the content. You should also change the default margin(s) so go to line 54 and change:
      margin-right: 30px;
      to:
      margin-left: 30px;

      Reply
  19. Prasenjit
    Posted on June 21, 2015 at 09:50 Permalink

    Hello,

    This is nice js… but I have a problem to use it.
    When I will add below the code it’s working….

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

    $(“#content-1″).mCustomScrollbar({
    setTop:”100px”
    });
    });
    })(jQuery);

    But When I will add below code…it’s not working.

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

    $(“#content-1”).mCustomScrollbar(“scrollTo”,”top”);
    });
    })(jQuery);

    Please can you you help me out…

    Reply
    • malihu
      Posted on June 21, 2015 at 11:13 Permalink

      scrollTo is a plugin method, so it should be used after the scrollbar is initialized. For example:
      (function($){ $(window).load(function(){ $("#content-1").mCustomScrollbar({ /* options */ }); /* later on... */ $("#content-1").mCustomScrollbar("scrollTo","top"); }); })(jQuery);

      Reply
      • Prasenjit
        Posted on June 21, 2015 at 15:52 Permalink

        Hello,

        Thanks for reply…

        When I was add any option of this plugin, it’s not working. like :

        $(“.ut_chmid”).mCustomScrollbar({ axis:”x” });

        When I was add any thing like “{ axis:”x” }”, it’s not working… Please can you check this…

        I need the scrollbar start from bottom. Please can you help ma.

        Reply
        • Prasenjit
          Posted on June 21, 2015 at 15:56 Permalink

          It’s only working on like:
          $(“.ut_chmid”).mCustomScrollbar();

          Reply
      • Prasenjit
        Posted on June 21, 2015 at 16:07 Permalink

        Thanks for reply,

        I got your point… and Now its working…
        Thanks for your support.

        It is relay nice.

        Reply
  20. Devinda Senavirathna
    Posted on June 19, 2015 at 16:45 Permalink

    Hi i need to know customize scroll starting speed..

    Reply
  21. Ingo
    Posted on June 19, 2015 at 15:43 Permalink

    Hi malihu

    Thank you for this great Plugin. Works flawlessly and the api is great 🙂

    Regards
    Ingo

    Reply
  22. Landen
    Posted on June 18, 2015 at 17:27 Permalink

    Hello! I have a question.
    I’m trying to use SlideTo method with fixed value: ‘+=100’ and ‘-=100’, based on your example. But it doesn’t work as well as it should be. It scroll to the end of block, and then back to the top of block.

    Have any idea what am i doing wrong?

    Thanks for the great plugin!

    Reply
    • malihu
      Posted on June 19, 2015 at 09:51 Permalink

      Can you post your code (or send a link)?

      Reply
  23. Diseño grafico web Valencia
    Posted on June 18, 2015 at 16:03 Permalink

    Thanks for the info and for the update!!

    Reply
  24. Mick-UK
    Posted on June 18, 2015 at 14:09 Permalink

    Hi Guys,

    I’m really struggling to add a little code to disable the auto expand of the first accordion tab and to make them all collapsible on mouse clicking, I have tried adding the normal jquery code shown below but it just doesn’t seem to work, can anybody point me in the right direction so that all tabs are closed until clicking on and can also be closed again once open.

    active: false,
    collapsible: true,

    Many thanks in advance 😉

    Reply
    • Mick-UK
      Posted on June 18, 2015 at 20:14 Permalink

      NUDGE: Anybody please ??

      Reply
    • malihu
      Posted on June 19, 2015 at 09:54 Permalink

      Do you need help for a specific plugin example? Which accordion?
      For jQuery UI accordions you can find info here:
      https://jqueryui.com/accordion/
      and here:
      http://api.jqueryui.com/accordion/

      Reply
      • Mick-UK
        Posted on June 19, 2015 at 10:41 Permalink

        Hi malihu,

        I’ve tried both those links and added what I thought was the correct syntax to achieve what I’m looking for, below is the code implemented but it still doesn’t work correctly and with being a bit of a novice at this sort of thing, I’m at a complete stand still with where to go next.

        <script> (function($){ $(window).load(function(){ $("#accordion").accordion({ create:function(e,ui){ /* call mCustomScrollbar function on each accordion content upon accordion creation */ $(".ui-accordion-content").mCustomScrollbar({ setHeight:250, active: false, collapsible: true, theme:"rounded-dark" }); } }); }); })(jQuery); </script>

        Anymore help greatly appreciated

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

          collapsible and active options are in the wrong place. They’re not supposed to be inside the mCustomScrollbar function!

          accordion function should be:
          $("#accordion").accordion({ collapsible: true, active: false, create:function(e,ui){ $(".ui-accordion-content").mCustomScrollbar({ setHeight:250, theme:"rounded-dark" }); } });

          Reply
          • Mick-UK
            Posted on June 19, 2015 at 12:17 Permalink

            AWESOME, working like a dream now, many thanks Malihu 😉

  25. berbux
    Posted on June 16, 2015 at 22:58 Permalink

    Hello Malihu,

    I have completely the same files , css, js, php on developsite (localhost Xampp) and published site (on 000webhost). on localhost the vertical scrollbar is present and functional.Can you figure out why the scrollbar is not present on this “published” site please? (the scrollbar does function on an other part published on the same remote webserver )
    thanks and kind regards, Ber
    example link to non working page :
    http://grisdegrisceramics.net/draft2015/feedtags.php?var_pageref=agendapages+2015+werchter

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

      The scrollbar seem to work for me (tested your page in latest Chrome and IE).

      If you experience issues with the published files, you might want to call mCustomScrollbar on window load (instead of document ready).

      Reply
      • mike
        Posted on June 17, 2015 at 11:20 Permalink

        I created a single page website and I am using a navigation to scroll to the different sections of the website. Now I would like to change the scrollbar to something similar to slimScroll. The problem is that when I add this plugin the scrollTo on the website does not seem to work. Can anyone help me out with this?

        Reply
    • berbux
      Posted on June 17, 2015 at 01:07 Permalink

      Dear Malihu,
      SOLVED.
      .. ? did I ask without considering a second view ,.. I checked and doublechecked,… I am sorry, it suddenly seems to workanyway.. my error.
      sorry for the post, anyhow, is this code correct for you ? kind regards, Ber

      Reply
      • malihu
        Posted on June 17, 2015 at 16:55 Permalink

        Yes it looks correct.

        Reply
  26. ferranmoron
    Posted on June 13, 2015 at 19:58 Permalink

    If you need to update the scrollbars when you resize the browser, you can try this solution. It works fine!

    ( function ( $ ) { $(window).resize(function(){ //calculte height var disponible = $(".menulateral").innerHeight() - $(".pie").innerHeight() - 25; // destroy scrollbars $("#wrapper_menu").mCustomScrollbar("destroy"); // init scrollbars $("#wrapper_menu").mCustomScrollbar({ setHeight: disponible, scrollInertia: 0, setWidth: 210, theme:"bo" }); }); })( jQuery ); // init scrollbar ( function( $ ) { $( window ).ready(function() { var disponible = $(".menulateral").innerHeight() - $(".pie").innerHeight() - 25; $("#wrapper_menu").mCustomScrollbar({ setHeight: disponible, scrollInertia: 0, setWidth: 210, theme:"bo" }); }); } )( jQuery );

    Reply
    • Arthur
      Posted on June 15, 2015 at 22:09 Permalink

      advanced:{ updateOnContentResize: boolean }

      dosnt’ this option solve your problem?

      Reply
  27. Jose Castro
    Posted on June 12, 2015 at 20:11 Permalink

    Hi, Thanks for your awesome plugin.

    I have a problem with the scroll in the last item, the dont show the scroll… you have idea how is the problem?? in the other items found perfect…

    Thanks for your comments… and sorry for my pour english 🙂

    Reply
    • malihu
      Posted on June 12, 2015 at 20:43 Permalink

      Hi, can you send me a link or test page?

      Reply
      • Jose Castro
        Posted on June 12, 2015 at 22:45 Permalink

        Hi malihu this is the link
        http://stage.olivetto.com.co.php54-3.ord1-1.websitetestlink.com/gastronomico/a-donde-ir

        in the gallery past to CACIO E PEPE this have the problem, i test add for jq with this

        var cont =0; number items
        $(“.tab4-content li”).each(function(){
        cont++;

        });
        var ident = “mCSB_”+cont+”_scrollbar_vertical”;

        var ident2 = “mCSB_”+cont+”_dragger_vertical”;

        var ident3 = “mCSB_”+cont+”_container”;

        $(“#”+ident+””).css(“display”,”block”);

        $(“#”+ident2+””).css(“height”,”174px”);

        $(“#”+ident3+””).removeClass(“mCS_y_hidden mCS_scrollbar_y”);
        alert(“hello”);

        thanks for your help

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

          It looks like a conflict between custom scrollbar and bx-slider. My guess is that you need to move:
          $('.rest-det').mCustomScrollbar({ ... });
          function (without the window load) after:
          $('.tab4-content').bxSlider({ ... });

          As it is now, bx-slider clones the last element without(?) the custom scrollbar, so you need to apply the scrollbars after bx-slider has done its thing.

          Reply
          • Jose Castro
            Posted on June 13, 2015 at 00:36 Permalink

            Hi malihu, its work perfect, thanks thanks men you save my day…

            i used some $(‘.tab4-content’).bxSlider({ … }); so for anyone i put after $(‘.rest-det’).mCustomScrollbar({ … }); and comment the windows load.. again work perfect

            thanks for your help 🙂

  28. Suci
    Posted on June 12, 2015 at 17:52 Permalink

    Hello,

    Thank you for this incredible plugin, have used this quite a bit. I was wondering, could not find a way to search through all the comments… just to read through specific queries & check if I am not re-posting a query that’s already posted.

    I had two doubts to check if I can get some heads up:

    1 – I am using a content scroller for 100% of page width, but not full height of the page height. Is there anyway I can use Mousewheel on the rest of the page, to initiate mousewheel for the scroller? Like scrolling the custom-content-scroller when user uses Mousewheel on the rest of the page body.

    2 – This same custom-content-scroller is using 100% page width, but is there a way out to center-align the content of the scroller? This is because at times I have lengthier content than the content-scroller width… but at times, I have lesser content than 100% of page width… in such case I wanted to have all the content (nested-div’s) to align in center.

    Any help in this regard will be appreciated. Cheers!!!

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

      Hello,

      1. I had made in the past such a test for vertical scrollbar (you can apply the same code for a horizontal one). I’ve uploaded it so you can see it here:
      http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/trigger_mousewheel_via_other_elements_demo.html

      Check its source. It only requires a couple lines of code to bind and trigger the mousewheel event 😉

      2. This should normally be done via CSS (and probably few callbacks). I think I’ve done this at some point… let me dig my files and I’ll let you know.

      Reply
      • Suci
        Posted on June 13, 2015 at 08:02 Permalink

        Hi,

        This is so cool 🙂 I just did saw the source.
        Writing my first reaction to THANK YOU… even before going for implementing the tweak in code.

        Cheers!!!

        Reply
      • Suci
        Posted on June 13, 2015 at 11:50 Permalink

        Thank you, this just worked flawlessly. You saved my life here 🙂 since I was struggling before finally posting my question.

        Guess both the mousewheel speed/inertia is different, when using mousewheel on the scroller and when using the mousewheel outside the scroller (in my case it’s Window/Body). Probably because the Inertia is defined while initiating the scroller. But remains undefined when using mousewheel outside the scroller.

        For making the both even or somewhat simliar in scroll speeds, is there a way out to define the Inertia… when binding mousewheel event on #mousewheel-trigger?

        I did some reading here, a detailed approach:
        http://stackoverflow.com/questions/5560714/how-to-enforce-a-smooth-scrolling-rule-for-mousewheel-jquery

        Reply
        • malihu
          Posted on June 13, 2015 at 12:04 Permalink

          You could set a fixed pixels scrolling amount when initializing the scrollbar(s), by using the mouseWheel:scrollAmount option.
          For example:
          mouseWheel:{ scrollAmount: 60 }

          Reply
          • Den
            Posted on June 29, 2015 at 17:24 Permalink

            Awesome, thanks! Was looking for it…

          • Suci
            Posted on July 2, 2015 at 11:46 Permalink

            Hello,

            Just another clarification.

            Is there a way out to initiate (the scroll) the custom scroller on the page, based on mouse cursor movement towards left & right part of the page body? Kind of using the scroller on full page-width.

            If there are any examples on that, I’d love to refer the same.

            I referred to this http://jsfiddle.net/BYUdS/2/ but could not make the customscroller scroll based on that. Sorry for my poor coding skills.

            Cheers.

    • malihu
      Posted on June 12, 2015 at 20:42 Permalink
      • Suci
        Posted on June 13, 2015 at 08:14 Permalink

        Hello again,

        Absolutely appreciated, these two examples seems to be just exactly what I had in mind. Can’t wait to try these ideas to see how it works at my end.

        Will surely post my updates, after implementing these tricks.

        Best regards…

        Reply
    • mike
      Posted on June 17, 2015 at 11:20 Permalink

      I created a single page website and I am using a navigation to scroll to the different sections of the website. Now I would like to change the scrollbar to something similar to slimScroll. The problem is that when I add this plugin the scrollTo on the website does not seem to work. Can anyone help me out with this?

      Reply
  29. myzhao
    Posted on June 12, 2015 at 12:49 Permalink

    Hi:
    Thanks for your great plugin.
    I’d like to know how can I use the plugin on a iframe?

    Reply
  30. yiwong
    Posted on June 12, 2015 at 05:42 Permalink

    Hi Malihu,

    Thanks for your great plugin.

    Do you experience any scroll issue on safari macos? Safari verison is 8.0.6 (10600.6.3). I tried your demo page. everything looks fine, but I am not able to scroll there by mouse and also can not drag scrollbar to scroll. It works on window safari.

    http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

    Reply
    • malihu
      Posted on June 12, 2015 at 17:11 Permalink

      No I haven’t. I’ve just tested the plugin again on Yosemite/latest Safari with a standard mouse and Apple magic trackpad without any issues.

      Reply

Comments pages: 1 64 65 66 67 68 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