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

jQuery custom content scroller

jQuery custom content scroller

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

Current version 3.1.5 (Changelog)
Upgrading from version 2

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

Version 2 is still maintained and updated here.


How to use it

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

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

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


HTML

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

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

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


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

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

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


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

CSS

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

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

Initialization

Initialize via javascript

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

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

more info

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

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

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

You may also have multiple selectors by inserting comma separated values

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

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

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

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

Initialize via HTML

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

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

Basic configuration & option parameters

axis

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

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

theme

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

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

Configuration

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

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

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

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

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

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

Plugin methods

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

update

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

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

view examples

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

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

scrollTo

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

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

position parameter

Position parameter can be:

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

Pre-defined position strings:

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

view examples

Scroll to element with id “#el-1″

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

Scroll to top

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

Scroll by 100 pixels down or right

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

Scroll by 100 pixels up or left

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

Scroll by 100 pixels down and by 50 pixels right

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

Scroll to the fifth paragraph

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

Scroll to the last element within your content

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

Scroll to some variable value

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

Scroll to 300 pixels

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

Method options

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

stop

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

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

disable

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

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

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

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

view examples

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

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

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

destroy

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

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

view examples

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

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

Scrollbar styling & themes

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

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

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

View all ready-to-use themes

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

Creating a new scrollbar theme

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

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

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

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

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

Scrollbar markup

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

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

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

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

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

#mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; }

#mCSB_1_scrollbar_horizontal .mCSB_dragger{ width: 100px; }

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

Custom scrollbar layout

User-defined callbacks

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

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

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

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

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

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

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

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

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

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

Additional callbacks:

Returning values

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

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

view examples

Load more content when scrolled to bottom

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

Run code when at least half of the content is scrolled

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

Plugin-specific jQuery expressions

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

Plugin dependencies & requirements

License

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

Pages: 1 2 3 4


5,578 Comments

Post a comment

Comments pages: 1 60 61 62 63 64 83

  1. Matjaz Jurecic
    Posted on April 4, 2015 at 03:00 Permalink

    How do I define and call callback when scrollTo is done.

    $(selector).mCustomScrollbar(“scrollTo”,”left”,{
    callbacks:false ?????
    });

    Reply
  2. Matjaz Jurecic
    Posted on April 4, 2015 at 00:50 Permalink

    I am having such a strange problem. I want to scroll through my list with keyboard up/down and I set class selected to next/previous element and it works, but as soon as I scroll by +/-=37 the selected element is next/previous of what I set – it jumps and skips the element that I set the selected class.

    I do not understand why?

    {
    theme: ‘light-2’,
    scrollbarPosition: ‘outside’,
    keyboard: {
    enable: true,
    scrollType: ‘stepless’,
    scrollAmount: ‘auto’
    },
    mouseWheel: {
    enable: true,
    scrollAmount: 100
    }
    }

    Reply
  3. Mkhitar
    Posted on April 3, 2015 at 12:44 Permalink

    Hi Manolis,

    Thank you for the plug-in and being very responsive when giving feedback to the comments posted here.

    However we have an issue that I didn’t manage to find a solution for in those comments.
    Here it is. When searching a text on the page having a content scroller in it.
    When the browser search navigates to the keyword found in the invisible part of the scrolable section the scrollbar of (1) the section disappears, (2) and when hovering the mouse pointer over the section and trying to scroll (e.g. with mouse wheel) the current position of the content is discarded and scrolled to the upmost point.

    Could you please advice how can we overcome this issue.

    Thanks,
    Mkhitar

    Reply
  4. Cyxer
    Posted on April 3, 2015 at 00:59 Permalink

    Hi,
    Very nice plugin!

    I’m just missing something with “myID:mcsInView”.

    I’m trying to insert video players on elements when they become visible, but I always get “unsupported pseudo: mcsInView” or “false”;

    Could you provide an exemple of “acting on an element when it becomes visible” ?

    Regards.

    Reply
    • malihu
      Posted on April 3, 2015 at 07:53 Permalink

      Sure,

      Assuming you have an element with id “testid” in your content, you could something like this:
      $(selector).mCustomScrollbar({ callbacks:{ onScroll:function(){ if($("#testid").is(":mcsInView")){ $("#testid").html("video markup"); } } } });

      Normally, you’d want to add the video markup once, so you can easily add an additional class to the element when video is inserted and check for the class in the condition:
      $(selector).mCustomScrollbar({ callbacks:{ onScroll:function(){ if($("#testid").is(":mcsInView") && !$("#testid").hasClass("video")){ $("#testid").html("video markup").addClass("video"); } } } });

      You can see a demo of mcsInView expression here:
      http://manos.malihu.gr/repository/custom-scrollbar/code-examples/custom-jquery-expressions/mcsinview/

      Reply
      • Cyxer
        Posted on April 3, 2015 at 23:32 Permalink

        Hi, I’ve tried this with no result.

        Here is my test code :
        $("#vidlist").mCustomScrollbar({ callbacks:{ onScroll:function(){ if($("#vid3").is(":mcsInView")) { console.log("in view"); } else { console.log("not not in view"); } } } });

        console never shows “in view”.

        Reply
        • Cyxer
          Posted on April 4, 2015 at 00:00 Permalink

          Your example is working fine, there must be something else in my DOM that’s messing around. Thanks for the help.

          Reply
          • Sergio
            Posted on July 2, 2016 at 01:25 Permalink

            I have the same problem, I think have something to do with the loading of the js files and the functions execution. I have the problem on the first load of the page, if I restart the scroll the pseudo class works fine.
            Is there any way to check if the new pseudo class is created before use it?

      • malihu
        Posted on July 2, 2016 at 19:48 Permalink

        @Sergio

        Do you run your code on window load? You normally just need to make sure your code runs after scrollbar in initialized.

        Reply
  5. Alice
    Posted on April 2, 2015 at 00:05 Permalink

    Hi,

    I got a little issue.
    Content is a form.

    When user scroll down and click or go to an input element, the scroll bar automatically goes up to the top of content.

    Anything I should do to disable this?

    Thanks a lot,
    Alice

    Reply
    • Alice
      Posted on April 2, 2015 at 20:20 Permalink

      Solved. I disabled autoScrollOnFocus. 🙂

      Reply
  6. Nasr Nassar
    Posted on April 1, 2015 at 21:38 Permalink

    hey malihu, i got a quick question,

    so i have the following html:

    the one with id s4-workspace has scroll because of the content,
    the sideNavBox is fixed in term of position, but the content in it is dynamic (expandable groups accordion).
    when calling the scroll bar on the body tag the site crashes with errors in the console,
    when calling it on s4-workspace it works for the content but when the left navigation content is expanded i can’t see any scroll bar, and if i call the function on the left navigation itself there’s a conflict with the accordion function.

    any help please

    Reply
    • Nasr Nassar
      Posted on April 1, 2015 at 21:40 Permalink

      Sorry i forgot the code tag 🙂

      <body> <div id="s4-workspace"> <div id="sideNavBox"> </div> <div id="contentBox"> </div> </div> </body>

      Reply
  7. Christian
    Posted on April 1, 2015 at 18:48 Permalink

    Hello,

    I have a little problem with your script (which is awesome by the way)

    The problem occurs on touch devices (ipad)

    Sometimes, I can’t figure out why, when I try to scroll my div, it’s just like if it is the background of the page that is focused, and it tries to scroll the background while the div is completely ignored

    Unfortunately I can’t give you a link (it’s in a restricted area of a web application), but I can give you some information, maybe it is related to an already known issue and you will be able to help me :

    – I use an old version of jquery 1.7.2 + jquery mobile 1.1.0
    – The divs are positionned “fixed”

    Hope you can help me

    Best regards,

    Christian

    Reply
  8. Artur Haddad
    Posted on April 1, 2015 at 16:18 Permalink

    Great plugin, congratulations!

    scrollInertia can make it scroll slower, but how can I achive it for the arrow buttons?
    Because even with scrollInertia set, when i click in the arrows it’s being too fast.

    Thanks

    Reply
  9. Calvin
    Posted on April 1, 2015 at 11:02 Permalink

    I implemented you scroll bar. It looks great! Just I don’t know why there are no upward and downward arrows show up on the scroll bar. Can anyone helps?

    The page I am using is
    http://www.hvointeriordesign.com/projects.htm

    Thanks!

    Reply
    • malihu
      Posted on April 1, 2015 at 11:12 Permalink

      Scrolling buttons are not enabled by default. You need to use scrollButtons option parameter and set its enable property to true:
      scrollButtons:{ enable: true }

      Reply
  10. jack
    Posted on April 1, 2015 at 10:57 Permalink

    Sometimes, I need support the scroll bar has top and bottom horizontal scroll bar. This plugin is ok?

    Reply
    • malihu
      Posted on April 1, 2015 at 11:15 Permalink

      No. The custom scrollbar works like the browser/OS default one: Vertical, horizontal or both, but you can’t have 2 horizontal scrollbars on the same element.

      Reply
  11. Alex
    Posted on April 1, 2015 at 05:23 Permalink

    Hello,

    I started using this plugin on a project of mine and I was wondering if anyone could help me achieve like a slideshow with this scrollbar.

    I want to have it autoscroll from left to right, pause scrolling on .mouseover() and resume on .mouseout().

    I tried this to make it autoscroll, but it starts to glitch as soon as it starts scrolling back from the end:

    $("slider").mCustomScrollbar({ axis:"x", theme:"light-thin", advanced:{autoExpandHorizontalScroll:true}, mouseWheel:{ enable: 0 }, callbacks:{ onInit: function(){ $(this).mCustomScrollbar("scrollTo","right", {scrollEasing: "linear", scrollInertia: 20000}); }, onTotalScrollBack: function(){ $(this).mCustomScrollbar("scrollTo","right", {scrollEasing: "linear", scrollInertia: 20000}); }, onTotalScroll: function(){ $(this).mCustomScrollbar("scrollTo","left", {scrollEasing: "linear", scrollInertia: 20000}); }, onScroll: function(){ $(this).mCustomScrollbar("scrollTo","left", {scrollEasing: "linear"}); } } });

    Thanks.

    Reply
    • malihu
      Posted on April 1, 2015 at 11:18 Permalink

      I think you should remove the onScroll callback.

      Reply
      • Alex
        Posted on April 1, 2015 at 11:54 Permalink

        That seems to fix it, thanks. Though, do you have any idea if I could pause the scrolling on hover and resume it after?

        Reply
      • Alex
        Posted on April 1, 2015 at 11:58 Permalink

        Or at least slow it down.

        Reply
  12. Dave G
    Posted on March 31, 2015 at 19:54 Permalink

    Hi Manos,
    Thank you for your custom scroller. It works great and has gotten better over time.

    My only issue is that on OS X, I need to follow the OS X > System Preference > Mouse > Scroll Direction setting for people that use OS X trackpads and mice with finger gestures. I know I can set which direction to scroll with your methods, but I can’t read the System Preference which the user can change at any time. Is there any way to have your scroller follow the OS X setting? You can see my implementation here: http://www.walker-warner.com/portfolio.php.

    Thanks for any help/suggestions.

    -dave

    Reply
    • malihu
      Posted on April 1, 2015 at 01:47 Permalink

      Hello Dave,

      Detecting OSX “natural” scrolling with javascript is very limited (almost non-existent).

      There’s only one property to check (on the mouse-wheel event) and afaik it only works on Safari. The property is webkitDirectionInvertedFromDevice and I’ve uploaded a test page so you can check it with OSX/Safari and see if it works:
      http://manos.malihu.gr/repository/tests/custom-scrollbar-osx-wheel-direction/

      If it does work, I’ll update the script and/or I’ll send you the modified jquery.mCustomScrollbar.js, so let me know.

      Reply
      • Dave G
        Posted on April 1, 2015 at 02:18 Permalink

        Hi Malihu,
        OK, thanks, not good news as my client is pretty adamant about it. Other scrolling systems do seem to work, but maybe because they’re coded in an inherently different way? They might just “hook” into the existing scrollbars rather than the way you do it which seems to be completely separate?

        I may use yours for Windows and go back to the default scrollbars for OS X as we want them to look more like OS X.

        -dave

        Reply
        • malihu
          Posted on April 1, 2015 at 02:45 Permalink

          I see. I just checked the test page on Safari with a standard mouse and it does detect “natural” scrolling so I’ll implement the fix on the next update.

          I’ll keep digging into this and try to find a alternative way (or better) solution.

          Reply
          • Dave G
            Posted on April 1, 2015 at 04:17 Permalink

            Thanks. The test seems to work in Chrome and Firefox as well on OS X but it’s opposite to what’s defined as “natural scrolling” which is move finger left, content moves left, move finger right, content moves right and the opposite when “natural scrolling” is NOT set.

        • malihu
          Posted on April 1, 2015 at 04:33 Permalink

          Aha! Seems like Firefox and Chrome consider it “unnatural” lol
          I’ll investigate further…
          Thanks for the feedback 🙂

          Reply
  13. Juan Idrobo
    Posted on March 30, 2015 at 22:54 Permalink

    Hi Malihu!
    Thanks for this great plugin, we are running test cases for different browsers and we have found an issue with IE10, the scrollbar doesn’t appear and the list-container seems not to be set up!
    Can you take a look on the page http://www.linkapedia.com
    We will appreciate your help!

    Reply
  14. Kinga
    Posted on March 30, 2015 at 11:22 Permalink

    Hi there, thank you for your great plugin!

    I have a question about trackpad on MacBook. I have scrollable table on the page. Is it possible to scroll this table horizontally only when I’m doing horizontal gestures on the trackpad?
    Currently table scrolls on vertical and horizontal gestures. Perfect situation would be to have table scrolling on horizontal gestures and page scrolling on horizontal gestures.

    Thanks,
    Kinga

    Reply
  15. Chris W
    Posted on March 29, 2015 at 06:47 Permalink

    Thanks for making this, I found it to be really simple to implement to get the effect I wanted.

    I am having an issue where the scrollbar disappears when clicking on an anchor, can you please advise?

    Reply
    • malihu
      Posted on March 29, 2015 at 21:03 Permalink

      I can’t really help unless I see your page/code. Can you send me a link?

      Reply
    • malihu
      Posted on March 29, 2015 at 22:33 Permalink

      Each one of your anchors goes to a different HTML (e.g. 2DGallery.html, 3DGallery.html etc.), so you have to implement the plugin on every one of those pages (as you did with your homepage). Is this what you need?

      Reply
      • Chris W
        Posted on March 29, 2015 at 22:36 Permalink

        Actually I’m talking about the orange & black anchor links on the right hand side – so far there’s only three – that jump to content further down the same page.

        Those additional galleries I haven’t set up yet, so I’m not worried about those atm.

        Reply
        • malihu
          Posted on March 29, 2015 at 22:42 Permalink

          Yeah I figured that lol. See comment below.

          Reply
    • malihu
      Posted on March 29, 2015 at 22:41 Permalink

      If you mean about the anchors on the right navigation, you’ll have to use plugin’s scrollTo method in order to scroll-to those ids in the content with the scrollbar. For example:
      <script> (function($){ $("#Sidebar a").click(function(e){ e.preventDefault(); $("#Container").mCustomScrollbar("scrollTo",$(this).attr("href")); }); })(jQuery); </script>

      Reply
      • Chris W
        Posted on March 29, 2015 at 22:42 Permalink

        Ah, I see I will try that, thanks for checking it out for me.

        Reply
        • malihu
          Posted on March 29, 2015 at 22:44 Permalink

          Just fixed a typo/error in the function, so copy it again if you have already.

          Reply
  16. Hernan Lencinas
    Posted on March 28, 2015 at 18:52 Permalink

    Hi, Malihu.
    Thanks for such an awesome plugin.
    Currently I facing a problem with mousewheel not working on a page inside frameset, works perfect on IE or Firefox but not on Safari.
    I made a testing page http://www.urra.com.ar/_temp/malihu.html
    I hope you can help me.
    Thanks in advance.

    Reply
  17. Oliver Lebrock
    Posted on March 27, 2015 at 09:43 Permalink

    This looks so cool! I’m really grateful for every posts about jQueries because until now, I’m still not very sure what to do with it. I’ve read from here http://www.lionleaf.com/blog/what-is-jquery/ that a jQuery can enhance a website’s events and animations. But won’t it slow down the loading time of a website?

    I would be glad to hear your thoughts, thanks!
    Oliver

    Reply
    • malihu
      Posted on March 27, 2015 at 18:34 Permalink

      The jQuery library will add about an additional 95kb to your page (this overhead is normally for the first page load and when jquery is not in browser’s cache).
      Most of the websites you visit (including this one) uses jQuery, so if you find the loading time(s) acceptable, the same will apply to your website(s).

      In addition, simple things like loading jQuery via CDN (e.g. Google) and including the script at the bottom of the HTML document will help with page loading time.

      In my experience, non-minified js/css or a non-optimized image will slow down loading time more than jQuery. When loading times become an issue, +/- 100kb won’t really help. You’ll probably need caching and CDN anyway.

      Reply
  18. Russell Jones
    Posted on March 26, 2015 at 16:45 Permalink

    Hi, great script. Is it possible to enable scrolling when the mouse wheel is clicked in? That is the normal scroll method whereby you click the wheel in allowing you to scroll using the mouse movement. I know some people scroll that way so it would be good to support their habits.

    Reply
    • malihu
      Posted on March 26, 2015 at 18:42 Permalink

      Currently the plugin does not support mouse-wheel click scrolling. I’ll see if I can implement this feature on a future release. Thanks for the feedback 🙂

      Reply
  19. Joyce
    Posted on March 26, 2015 at 15:56 Permalink

    Hi Malihu

    First of all thank you very much for your awesome plugin!
    We use it in different projects and we now have a “problem” with scrolling on mobile devices.
    On my Samsung Galaxy S5 it works but its not really smooth, while there are some bad lags on iPhone 5 and 6. If we try to scroll down on the touch display we have to swipe several times until the content scrolls down, same for scrolling up.

    Have you got an idea how we can fix this issue?

    Thank you very much for your help.

    Thanks
    Joyce

    Reply
    • malihu
      Posted on March 26, 2015 at 18:46 Permalink

      To enhance the performance on smartphones, try disabling the auto-update options like updateOnImageLoad:
      advanced:{ updateOnImageLoad: false }

      Reply
      • Joyce
        Posted on March 30, 2015 at 18:31 Permalink

        Hi

        Thank you for your fast reply.
        Unfortunately, this didn’t help really much.
        If you look at http://www.rolf-schubiger.ch/raum on a mobile device, you’ll see that still there are many lags.
        I tried the following configuration:
        $("#page").mCustomScrollbar({ theme: "dark", advanced: { updateOnBrowserResize: false, updateOnContentResize: false, updateOnImageLoad: false }, contentTouchScroll: 25 });

        Are there any other things we could do to enhance the performance?

        Thank you a lot!

        Reply
        • romah
          Posted on April 1, 2015 at 21:15 Permalink

          Same issue here … very slow…
          Also tested under Windows phone 8

          Reply
        • Jaco Botha
          Posted on April 2, 2015 at 11:22 Permalink

          Same issue… have you found a solution?

          Reply
  20. Adi
    Posted on March 26, 2015 at 08:59 Permalink

    Hi,
    1. Suggestion
    2. Question

    1. May I suggest you implement comments search? In my opinion it will save you and the users much time.
    I’m quite certain that many of the questions are being asked again and again.

    2. I have a SharePoint intranet site, which hosts what is called WebParts in it. There is a lot of content that has scroller in it, including the main.
    How do I initialize your plugin to automatically replace every element that has the default browser scroller, without the need to specify element ID or class?

    Thanks a lot!

    Reply
    • malihu
      Posted on March 26, 2015 at 18:38 Permalink

      Thanks for the suggestion and feedback 🙂

      You could check for browser scrollbar(s) like this:
      return this.scrollHeight > $(this).innerHeight();

      The above should return true for vertical scrollbar.

      Now, in order to make this a “proper” function and use it as a jquery selector and condition, I’d suggest creating a custom jquery expression:
      $.extend($.expr[":"],{ scrollable:$.expr[":"].scrollable || function(el){ return ($(el).css("overflow")==="auto" || $(el).css("overflow")==="scroll") && (el.scrollHeight > $(el).innerHeight() || el.scrollWidth > $(el).innerWidth()); } });

      Then you could do things like:
      $("body :scrollable").mCustomScrollbar();
      or
      if($("#id").is(":scrollable")){ console.log("#id has scrollbar(s)"); }

      Hope this helps

      Reply
      • Adi
        Posted on March 29, 2015 at 08:12 Permalink

        Thanks, I’ll play with it and let you know!

        Reply
  21. Brian Daigle
    Posted on March 24, 2015 at 20:02 Permalink

    Hello,

    Thank you so much for such a great plugin! I just downloaded it and cant wait to implement it to my site.

    A quick question though: I want to have a horizontal scrolling portfolio section on my site. Is there a way where I can have the scrollbar at like 60% the width of the div? I’ve tried reducing the size but the slider seems to extend beyond the track.

    If theres a way to shrink the length of the scrollbar or if theres already a faq addressing this, please let me know.

    Thanks again!
    Brian

    Reply
  22. Patrik
    Posted on March 24, 2015 at 14:08 Permalink

    Hi,

    Thanks for this extension it´s cool.
    However I have one question.
    I want to set the width of a div. I tried into header via script but no one worked.
    Where and what exactly may I write my custom styling parameter?

    Reply
    • malihu
      Posted on March 24, 2015 at 15:23 Permalink

      The script does not modify your div’s dimensions. Send me a link or your code if you can, otherwise I can’t really help.

      Reply
      • patrik
        Posted on March 25, 2015 at 09:21 Permalink

        Hi,

        on this page http://www.mobilnet.sk/cz/ scrollbar is used in ESHOP hover menu,
        I fixed few problems, but scroll bar starts on the right side (problem in Chrome and IE, Mozzila is OK).
        The second problem is: When I´m scrolling the home page (where is revolution slider) and i´m on hover menu on eshop, div with scrollbar is gone. I think the problem is by revolution slider but I can´t fix it. (it works fine only in Mozzila).

        Reply
        • malihu
          Posted on March 25, 2015 at 20:44 Permalink

          Do these issues remain if you disable the custom scrollbar and use browser’s default one? We need to find out if the issue is on the slider, menu or a conflict between any of these and the custom scrollbar.

          Reply
  23. Mira
    Posted on March 23, 2015 at 22:17 Permalink

    I looooove your sliders!
    Could you help me, please? I wanted to combine two types of your sliders “custom horizontal” and “show when page ready thumbnail scroller”, but nothing works 🙁
    I have very long horizontal slider with hundreds of images and mouse wheel scrolling (as your custom horizontal slider). I need to add preload script from your example here.

    Is it possible to combine them? And how?
    Thank you for attention. And I hope I don’t really bother you

    Reply
    • malihu
      Posted on March 24, 2015 at 15:19 Permalink

      If you have that many images you shouldn’t really preload them as it’ll take too much time(?)

      Can you send me a test page of what you’re trying to do?

      Reply
  24. wolverine
    Posted on March 23, 2015 at 16:51 Permalink

    How can i trigger go to last element in container?

    Reply
    • malihu
      Posted on March 24, 2015 at 15:16 Permalink

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

      Reply
  25. Gav Murphy
    Posted on March 23, 2015 at 12:00 Permalink

    Upgraded to 3.0.7 specifically for the Android webkit fix in for loss of vertical page scroll when starting scroll event from inside a Custom Scroll element with horizontal scroll, but the bug is still there.
    View the referenced web app on Android webkit/chrome and the custom scroll element showing various tables can be scrolled left-right as initialised by this library, but when touching the screen in the same element to initiate a vertical page scroll, the page will not scroll.
    Instead, you have to hope you have enough of the standard page outside the custom scroll influenced element, or grab the sliver of page padding on either side to move the page, but the average users doesn’t know this.
    Since this is not referenced again for 3.0.8 we haven’t updated the app with the latest version.
    Any thoughts? All help would be most welcome.
    Thanks.

    Reply
  26. Ronak Patel
    Posted on March 22, 2015 at 22:29 Permalink

    Hello,

    Thanks for developing such a awesome plugin. I am facing one problem in your autocomplete example.

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

    in this when I try searching with string “A” lots of items starts appearing and when i scroll with mouse wheel it works perfectly fine. But when I tries the same with down arrow or up arrow the scroll bar does not move (though it changes value in the text based on the down/up arrow movement)

    Kindly advise on that as events are also not firing.

    Thanks,
    Ronak

    Reply
    • malihu
      Posted on March 24, 2015 at 15:47 Permalink

      Hi,

      In jquery_ui_autocomplete_example.html adding the following code after the response event, will scroll the scrollbar accordingly:
      focus:function(e,ui){ var el=$(".ui-state-focus").parent(); if(!el.is(":mcsInView") && !el.is(":hover")){ $(".ui-autocomplete").mCustomScrollbar("scrollTo",el,{scrollInertia:0,timeout:0}); } },

      I’ve also updated the demo:
      http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/jquery_ui_autocomplete_example.html

      Reply
      • Ronak
        Posted on June 3, 2015 at 16:43 Permalink

        Thanks a ton for reply. I have tried to integrate same with the dropdown and it does not seem to be working. Heere I am placing a link for your reference.

        http://dev.jobstoday.de/dropbox/

        Your help will be highly appreciated.

        Thanks in advance.
        Ronak

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

          You probably need to change:
          var el=$(".ui-state-focus").parent();
          to:
          var el=$(".selected");

          Reply
          • Ronak Patel
            Posted on June 4, 2015 at 09:24 Permalink

            It’s not auto complete text box but I have used the msdropdown plugin for giving good look and feel to my dropdown box and scroll doew not seemed to be working when I traverse the contents through keyboard.

            Thanks,
            Ronak

        • malihu
          Posted on June 4, 2015 at 11:03 Permalink

          Well, I’m not familiar with the plugin, so I don’t know if it’s possible. If you could send me a test page I could give it a go…

          Reply
        • malihu
          Posted on June 4, 2015 at 20:22 Permalink

          Did you try the code I suggested?

          Reply
          • Ronak Patel
            Posted on June 5, 2015 at 06:38 Permalink

            Yes I tried at various places…Can you give me a hint where should I try…As my dropdown gets filled from php code and not from ajax.

            Thanks,
            Ronak

          • Ronak Patel
            Posted on June 6, 2015 at 09:04 Permalink

            Hello Malihu,

            Please suggest the code or help in this.

            Thanks,
            Ronak

          • Ronak Patel
            Posted on June 11, 2015 at 17:17 Permalink

            Hello,

            Anything for me?

            Thanks,
            Ronak

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

          You’ll need to contact the ms-Dropdown plugin developer (https://github.com/marghoobsuleman) and ask him if the plugin provides an event callback similar to jQuery UI Autocomplete “focus” shown here: http://api.jqueryui.com/autocomplete/#event-focus

          If it does provide such event, the code I posted will go there. If it doesn’t we might try something different (maybe a custom event).

          Reply
          • Ronak Patel
            Posted on June 26, 2015 at 14:05 Permalink

            Hello,

            Thank you very much for reply. I tried contacting him but no response from him. Can you help in that case?

            Thanks,
            Ronak

  27. James Eck
    Posted on March 22, 2015 at 19:46 Permalink

    Malihu,

    I just started playing with this great package. I’m loving the results. I do have one question: how would I go about setting the scroll position, for example to the center of the content? I am currently trying to use setTop and setLeft to do it, but am not seeing any change.

    Thanks.

    Reply
    • malihu
      Posted on March 24, 2015 at 15:07 Permalink

      You can do this manually like this:
      setTop:"-600px"
      changing the 600 value to your content center.

      If you want to do this automatically, you can call the scrollTo method on initialization like this:
      $(selector).mCustomScrollbar({ callbacks:{ onInit:function(){ var c=this.mcs.content,to=(c.height()-c.parents(".mCustomScrollBox").height())/2; $(this).mCustomScrollbar("scrollTo",Math.round(to)); } } });

      Does this help?

      Reply
      • James Eck
        Posted on April 18, 2015 at 01:24 Permalink

        I think it probably does. My code is in a state of refactor where I can’t test this immediately, but I will try it as soon as I can. Thanks!

        Reply
  28. Luis
    Posted on March 20, 2015 at 23:34 Permalink

    Automatic Height fails, put setHeight: ‘100%’, and the bar disappears, and standard navigation bar is placed, but with another design.

    Reply
    • malihu
      Posted on March 24, 2015 at 14:34 Permalink

      If you send me a link I’ll be able to help.

      Reply
  29. ron
    Posted on March 17, 2015 at 23:23 Permalink

    hi maihu,

    Thanks for posting this very helpful article, i’m wondering if is this compatible with ie8? i wanted to run the demo on ie8 browser so i can see if it works however i’m currently on mac so i hope you can answer my question.

    thanks

    Reply
    • malihu
      Posted on March 19, 2015 at 13:08 Permalink

      Hi,

      Yes the scrollbar is functional on IE8

      Reply
  30. Ramakrishnan
    Posted on March 16, 2015 at 08:11 Permalink

    I have a viewport(fixed canvas) and a virtual canvas. I need to add scroll bar to fixed canvas to move the viewport over the virtual canvas.

    Reply
    • Ramakrishnan
      Posted on March 20, 2015 at 09:15 Permalink

      Hi Malihu,

      I am not sure you read my earlier comment. I would like to use the scrollbar independant of the content, where I will translate the movement of scroll position(in pixls) to a movement of pyshical canvas over virtual canvas.

      Thanks,
      Ramakrishnan

      Reply
      • malihu
        Posted on March 24, 2015 at 14:32 Permalink

        I can’t really understand what you’re trying to do. I’d either need extra info or a link to see exactly what you need. In general, the scrollbar cannot work out of its content but maybe you can accomplish what you need by design (e.g. customizing the CSS).

        Reply

Comments pages: 1 60 61 62 63 64 83

Post a comment

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

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

css.php