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.0.3 (Changelog)

Upgrade notice

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 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.x is still maintained and updated here.

How to use it

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

Include jquery.mCustomScrollbar.css in the head tag your html document

<link rel="stylesheet" href="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 (usually recommended for better performance)

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

After files inclusion, add the class mCustomScrollbar to any element you want to add custom scrollbar(s)

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

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

The example above adds scrollbars to elements with class name content

In order for the scrollbar to appear, the element(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.

By default the script applies the 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
});

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

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

Loading scripts from Github

Instead of hosting the plugin files on your web server, you can load each one directly from Github. You can choose to always load the latest plugin version or a specific one

<!-- latest -->
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css" />
<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

<!-- v3.0.0 -->
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css" />
<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script>

Plugin files in detail

jquery.mCustomScrollbar.css contains the basic styling of the custom scrollbar and the ready-to-use 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 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.

jquery.mCustomScrollbar.concat.min.js is the main plugin file which contains the custom scrollbar script as well as dependencies (e.g. jQuery mousewheel plugin), concatenated and minified. This file should be included after jQuery library inclusion.

mCustomScrollbar function

Call mCustomScrollbar function after jQuery and jquery.mCustomScrollbar.concat.min.js script tags. The HTML should look something like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

The code is wrapped in (function($){ ... })(jQuery);. This ensures no conflict between jQuery and other libraries using $ shortcut (see Using jQuery with Other Libraries for more info). The plugin function is called on window load ($(window).load()) so it executes after all page elements are fully loaded. To call mCustomScrollbar on document ready (code executes when the DOM is ready)

<script>
    (function($){
        $(document).ready(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

You can change the function selector (".content") to anything you want (an element id, class name, js variable etc.) – see CSS selectors. 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).load(function(){
      $("#vertical-content").mCustomScrollbar({
        theme:"light-3",
        scrollButtons:{
          enable:true
        }
      });
      $("#horizontal-content").mCustomScrollbar({
        axis:"x",
        theme:"3d"
      });
    });
  })(jQuery);
</script>

Configuration

mCustomScrollbar function option parameters

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). Usage example: setTop: "-100px".
setLeft: 0
Set the initial css left property of content, accepts string values (css left position). Usage example: setLeft: "-100px".
axis: string
Define content’s scrolling axis (the type of scrollbars added to the element). There are 3 available values: “y”, “x” and “yx”. Set axis: "y" (default) for vertical scrollbar and axis: "x" for horizontal scrollbar. By setting axis: "yx", both vertical and horizontal scrollbars will be applied if necessary.
scrollbarPosition: string
Set the position of scrollbar relative to content. There are 2 available values: “inside” and “outside”. Setting scrollbarPosition: "inside" (default) makes scrollbar appear inside the scrolling area. Setting scrollbarPosition: "outside" makes scrollbar appear out of the scrolling area. 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 the whole page).
scrollInertia: integer
Set the amount of scrolling momentum as duration in milliseconds. Higher value means longer scrolling momentum which translates to smoother/more progressive scrolling animation stopping. Set to 0 to disable.
autoDraggerLength: boolean
Enable or disable auto-adjusting scrollbar(s) dragger length in relation to scrolling amount (same bahavior with browser’s native scrollbar). Set autoDraggerLength: false when you want your scrollbar to have a fixed size (e.g. a cycle).
autoHideScrollbar: boolean
Enable or disable auto-hiding the scrollbar(s). Setting autoHideScrollbar: true will hide the scrollbar(s) when scrolling is idle and/or cursor is out of the scrolling area.
autoExpandScrollbar: boolean
Enable or disable auto-expanding the scrollbar(s) when cursor is over or dragging the scrollbar.
alwaysShowScrollbar: integer
Always keep scrollbar(s) visible, even when there’s nothing to scroll. Set alwaysShowScrollbar: 1 to keep only dragger rail visible and alwaysShowScrollbar: 2 to keep all scrollbar components (dragger, rail, buttons etc.) visible. Set to 0 (default) to disable.
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 table rows, images, slides etc. Note that your elements must be of equal width or height in order for this to work properly.
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 title.
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 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 is ["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. There are 2 available values: “stepless” and “stepped”. Setting scrollType: "stepless" (default) means that holding/pressing the button will continuously scroll the content. Setting scrollType: "stepped" means that each button click will scroll content a certain amount (defined in scrollAmount option above).
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. There are 2 available values: “stepless” and “stepped”. Setting scrollType: "stepless" (default) means that pressing the arrow key will continuously scroll the content. Setting scrollType: "stepped" means that each key release will scroll content 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 value is 25).
advanced:{ autoExpandHorizontalScroll: boolean }
Auto-expand content horizontally (for “x” or “yx” axis). If set to true, content will expand horizontally to accomodate any floated/inline-block elements.
advanced:{ autoScrollOnFocus: string }
Set the list of elements 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 value is "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. The value should be true (default) when your content contains images.
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.
theme: string
Set the scrollbar theme (plugin’s CSS contains ready-to-use themes). The default theme is "light"
callbacks:{
    onScrollStart: function(){}
}
A function (or custom code) to call when scrolling starts (callbacks demo). Example:
callbacks:{
  onScrollStart:function(){
    console.log("scrolling started...");
  }
}

Set to false (default) to disable.
callbacks:{
    onScroll: function(){}
}
A function (or custom code) to call when scrolling is completed (callbacks demo). Example:
callbacks:{
  onScroll:function(){
    console.log("content scrolled...");
  }
}

Set to false (default) to disable.
callbacks:{
    onTotalScroll: function(){}
}
A function (or custom code) to call when scrolling is completed and content is scrolled all the way to the end (bottom/right) (callbacks demo). Example:
callbacks:{
  onTotalScroll:function(){
    console.log("scrolled to end of content.");
  }
}

Set to false (default) to disable.
callbacks:{
    onTotalScrollBack: function(){}
}
A function (or custom code) to call when scrolling is completed and content is scrolled back to the beginning (top/left) (callbacks demo). Example:
callbacks:{
  onTotalScrollBack:function(){
    console.log("scrolled back to the beginning of content.");
  }
}

Set to false (default) to disable.
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:{
    whileScrolling: function(){}
}
A function (or custom code) to call while scrolling is active (callbacks demo). Example:
callbacks:{
  whileScrolling:function(){
    console.log("scrolling...");
  }
}

Set to false (default) to disable.
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.
live: boolean, 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 an 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

update

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

Call the update method to manually update existing scrollbars to accomodate 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.

scrollTo

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

Call the scrollTo method to programmatically scroll the content to the position parameter. Position parameter can be a string (e.g. "#element-id", "bottom", "left" etc.), an integer indicating a number of pixels to scroll-to (e.g. 100), an array for y/x axis (e.g. [100,100]), a js/jQuery object, a function etc.

Examples

Scroll to the last element within your content

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

Scroll to element with id el-1

var elID="#el-1";
$(".content").mCustomScrollbar("scrollTo",elID);

scrollTo parameter

$(selector).mCustomScrollbar("scrollTo",String);
Scrolls to element position, string value can be any unique id, class etc.
$(selector).mCustomScrollbar("scrollTo","top");
Scrolls to top (vertical scrollbars)
$(selector).mCustomScrollbar("scrollTo","bottom");
Scrolls to bottom (vertical scrollbars)
$(selector).mCustomScrollbar("scrollTo","left");
Scrolls to left-end (horizontal scrollbars)
$(selector).mCustomScrollbar("scrollTo","right");
Scrolls to right-end (horizontal scrollbars)
$(selector).mCustomScrollbar("scrollTo","first");
Scrolls to first element’s position within the content
$(selector).mCustomScrollbar("scrollTo","last");
Scrolls to last element’s position within the content
$(selector).mCustomScrollbar("scrollTo",Integer);
Scrolls to number of pixels, e.g. $(selector).mCustomScrollbar("scrollTo",200);

Method option parameters

scrollInertia: Integer
Scroll-to animation speed, value in milliseconds. Example:
$(selector).mCustomScrollbar("scrollTo","bottom",{
  scrollInertia:3000
});
moveDragger: Boolean
Scroll scrollbar dragger (instead of content) to a number of pixels, values: true, false. Example:
$(selector).mCustomScrollbar("scrollTo",80,{
  moveDragger:true
});
callbacks: Boolean
Trigger user defined callbacks after scroll-to completes, values: true, false. Example:
$(selector).mCustomScrollbar("scrollTo","left",{
  callbacks:false
});

stop

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

Stops running scrolling animations. Usefull when you wish to interupt a previously scrollTo call.

disable

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

Calling mCustomScrollbar’s disable method will temporarily disable the scrollbar. Disabled scrollbars can be re-enable by calling the update method.

Method parameters

$(selector).mCustomScrollbar("disable",true);
Disable custom scrollbar and reset content’s scrolling position.

Example of using disable method

destroy

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

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

Example of using destroy method

Styling the scrollbars

Style your scrollbar(s) using the jquery.mCustomScrollbar.css file which contains the default scrollbar style plus a number of ready-to-use themes. You can directly change the default styling or you can keep it and add additional styles for each scrollbar.

You can have separate styling for each of your scrollbars on the same page, either by giving your content blocks different class names or ids or simply by targeting them in your css like this:

.mCSB_1_scrollbar .mCSB_dragger .mCSB_dragger_bar{
    /* 1st scrollbar dragger style... */
}
.mCSB_2_scrollbar .mCSB_dragger .mCSB_dragger_bar{
    /* 2nd scrollbar dragger style... */
}
.mCSB_3_scrollbar .mCSB_dragger .mCSB_dragger_bar{
    /* 3rd scrollbar dragger style... */
}

…and so on. Each content block in your document that has custom scrollbars gets automatically an additional unique class in the form of _mCS_+index number (e.g. _mCS_1) based on its index number within the DOM. Also, an additional id in the form of mCSB_+index number is generated for each .mCustomScrollBox div. This way you can easily target and style any scrollbar using its parent class name or id.

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. For 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
    }
});

Returning values

The script returns a number of values and objects related to scrollbar

  • 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)

Example

$("#content_1").mCustomScrollbar({
    callbacks:{
        whileScrolling:function(){
            myCustomFn(this);
        }
    }
});

function myCustomFn(el){
    var msg="Content inside the element with id '"+el.attr("id")+"' has scrolled "+mcs.topPct+"%";
  console.log(msg);
}

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

Post a comment

Comments pages: 1 4 5 6 7 8 16

  1. Jennifer
    Posted on October 1, 2012 at 12:00 Permalink

    Hello. Thank you for the excellent script. I’m using it horizontally to display a large number of images:

    http://www.jennsportfolio.com/#section_2

    Is there a way for the entire thing (including images) to scale responsively? Right now I have the width at 100% and the height hard-coded.

    Reply
  2. isuru
    Posted on September 29, 2012 at 22:12 Permalink

    Nice article. Apart from the cool plugin, I learned something important from this which is how to have a fallback on jQuery files loading. That’s pretty neat. Thanks :)

    Reply
  3. Natxo
    Posted on September 29, 2012 at 21:07 Permalink

    Hi Malihu,

    I’m try to use your nice scrollbar plugin in horizontal mode but i have some problems with Firefox browser (15.0.1). Other browsers go works fine.

    - The dragger bar events don`t work properly and makes scroll with the cursor out of it.
    - I have problem with the last element that don´t display inline but I resolve it adding a new div at last.
    You can see the test pagen on:

    http://xenonline.eu/seleccion_productos9.asp?sex=mujer&idm=ing&id_linea=4&id_familia=12

    Any suggestion how I can solve this problem?

    Thank you! Great work !

    Reply
    • Natxo
      Posted on October 4, 2012 at 17:19 Permalink

      Can anyone help me? I can not fix that the onmouseout event works properly in firefox.

      Reply
  4. Lionel
    Posted on September 28, 2012 at 12:19 Permalink

    Hi,
    Im using the mCustomScrollbar, awesome!
    I’ve a little problem with content. It seems that in FF it crop the last part of the div content.

    Any suggestions?
    Thanks,

    Lionel

    Reply
  5. noi
    Posted on September 28, 2012 at 05:59 Permalink

    Thanks for the tutorial, its working great in drupal 7.

    Anyway how can change the height of the .mCSB_dragger_bar?

    Thanks anyways!!
    c:

    Reply
  6. Carlos López
    Posted on September 27, 2012 at 22:39 Permalink

    I’m testing you scrollbars as i found it to feel my needs on putting customs on several places

    I’m setting a grid of fieldsets which has list of links, so, i’m setting a fixed height, hence the overflow must be scroll able, and I’m using your plugin for this matter. Still, i’m getting this error

    $this.data(“onScroll-Callback”).call();

    Firefox went crazy reporting this error, Chrome reports it every now as well as IE. Any advice on how to solve this matter?

    Reply
    • Carlos López
      Posted on September 27, 2012 at 22:40 Permalink

      *fill my needs

      should had double read it

      Reply
    • Carlos López
      Posted on September 28, 2012 at 01:10 Permalink

      Well, i just kinda solved my previous problem, i just added a try-catch on the line that was giving me trouble and works just fine on IE and FF. But its worry some that’s giving a problem.

      Well, i’m having another problem here… on all browser. The thing is when I click the scroll button (either up or down) it wont scroll. Any idea?

      Reply
      • Carlos López
        Posted on September 28, 2012 at 02:16 Permalink

        Debugging the script when loading the buttons, i found that every time that they are trying to check the data on scrollButtons-enable it comes undefined. Later i check every key that data has and found out that scrollButtons-enable
        scrollButtons-scrollAmount
        scrollButtons-scrollSpeed
        scrollButtons-scrollType
        onTotalScroll-Offset
        where the only ones that came as undefined. The rest gave me their values correctly.

        Reply
      • Carlos López
        Posted on September 28, 2012 at 03:23 Permalink

        Don’t know if jquery 1.6.1 has problems reading keys with a – sign on the name, as i’m working on 1.6.1, we aren’t going to update till we get word it doesn’t mess up the project (much), and we are stable with 1.6.1

        In the meantime, i fixed the issue. If you want to take note. Instead of using the data option, i just created a global variable, and once the options have been loaded, i copy them to this global variable and read the options from there

        Reply
        • malihu
          Posted on September 28, 2012 at 11:29 Permalink

          Hi,

          I think your problem is due to this bug regarding only jQuery 1.6.1 (previous and later versions don’t have this issue).

          It seems that data method “camelizes” data key if “-” is used. E.g. scrollButtons-enable becomes scrollButtonsEnable. Weird!

          Reply
  7. Leonardo
    Posted on September 27, 2012 at 21:02 Permalink

    Hello, malihu.

    sorry my gesture, is what I’m using google translator.

    I wonder if it is possible to use two bars, bottom and right side because my application is not going both ways, just one.

    could you help me please?

    Thank you.

    Reply
  8. aswani kumar
    Posted on September 27, 2012 at 19:59 Permalink

    hi malihu,

    you have been very supportive to people with this scroll plugin. thank you.

    i have problem with the update method. i tried every way, even with default values but no luck.

    please tell me where did i do wrong.

    #left-nav #div-cat{
    height:420px;
    width:300px;
    overflow:auto;}

    $(“#div-cat, #div-stations”).mCustomScrollbar({
    set_width:false,
    set_height:false,
    horizontalScroll:false,
    scrollInertia:550,
    scrollEasing:”easeOutCirc”,
    mouseWheel:”auto”,
    autoDraggerLength:true,
    scrollButtons:{
    enable:true,
    scrollType:”continuous”,
    scrollSpeed:20,
    scrollAmount:40
    }

    });

    $.post(‘json.php’, {‘param’:'GetLang’}, function(data) {

    var obj = jQuery.parseJSON(data);
    items = new Array();
    $.each(obj, function(key, val) {
    items.push(‘‘ + val + ‘‘);
    });

    $(‘#div-cat’).html(” + items.join(”) + ”);
    jQuery(“#div-cat”).mCustomScrollbar(“update”);
    });

    on document load its working fine but after updating content its getting normal scrollbars.

    Reply
    • malihu
      Posted on September 28, 2012 at 11:43 Permalink

      Hello,

      The plugin inserts its own markup in order to create the custom scrollbar (see this visual layout). Your actual content is inside the .mCSB_container div, so you should call the update method on this instead of #div-cat:

      jQuery("#div-cat .mCSB_container").mCustomScrollbar("update");

      Reply
  9. Leonardo
    Posted on September 27, 2012 at 19:32 Permalink

    I’m doing an application, how can I put scrollbar on the side and bottom? unfortunately it is necessary both because I am working with large tables.

    thank’s great plugin.

    Reply
  10. Stefan
    Posted on September 27, 2012 at 08:39 Permalink

    Hello!

    I have integrated your plugin on a joomla website. The scrollbar works fine, but other plugins which are using jquery and are loaded inside of the “designed scrollbar div” are knocked out. For example picture zoom or madalboxes just dont appear (they worked properly before).

    Any idea how to prevent this?

    Kind regards,
    Stefan

    Reply
    • malihu
      Posted on September 27, 2012 at 12:00 Permalink

      Hello,
      You probably need to apply the custom scrollbar first and then call the other plugins. The custom scrollbar plugin inserts its own markup, so if you’ve already called other plugin functions on the same content, they might not work since the markup has changed.

      Reply
      • Stefan
        Posted on September 27, 2012 at 15:03 Permalink

        Thank you for the hint!

        First I included the script-part at the end of the body-tag.

        Now i included it at the beginning of the head-tag. Everything works fine!

        Thanks for the great work and fast help!

        Reply
  11. Tomas
    Posted on September 26, 2012 at 19:00 Permalink

    The plugin is really great, but I’ve found one flaw.It’s impossible without modifying js code, to apply padding/margin to content and thereby to make scroller seem higher than content.

    Example

    Reply
    • malihu
      Posted on September 27, 2012 at 02:39 Permalink

      Yes. Only the opposite (content higher than scrollbar) is possible, as it seemed more likely or logical design-wise.

      Reply
  12. kc-viper
    Posted on September 25, 2012 at 18:04 Permalink

    Hi,

    Really nice plugins.
    But i’ve an issue with jquery 1.8.1, i’m getting error “Cannot call method ‘call’ of undefined” when dragging on the drag bar.

    One more issue is the scroll buttons up down remains on top and are not working when clicking.

    Thanks and Regards,

    Reply
    • malihu
      Posted on September 25, 2012 at 18:38 Permalink

      Hi,
      Try to use jQuery 1.8 with the latest version of jQuery UI (I’ve included jquery-ui-1.8.23.custom.min.js in the download archive).

      Reply
      • kc-viper
        Posted on September 25, 2012 at 18:57 Permalink

        many thanks for your quick response.

        However your suggestions was not successful.
        I’m getting same error.

        I don’t know if it’s because i’m using it inside nivo slider that’s why it’s not working as your samples?

        Anyway i should seek for alternatives or try to debug more deeply in your code when i’ve time to do so.

        Many thanks again dude for your plugins and support.

        Highly appreciated.

        Reply
  13. Tomas
    Posted on September 25, 2012 at 17:24 Permalink

    Thanks very much for the plugin! I don’t want to load whole jQuery UI, because it’s quite heavy(0.2MB).Could you tell which components must be present for plugin to work ?

    Reply
    • Tomas
      Posted on September 25, 2012 at 17:40 Permalink

      I applied some “trial and error” and made jQuery UI package from core, widget, mouse, and draggable.It doesn’t give any errors. Did I miss some packages which could get some not that visible errors ?

      If not that’s >75% smaller file with custom jQuery UI and only these four packages.

      Reply
      • malihu
        Posted on September 25, 2012 at 18:41 Permalink

        You haven’t missed any packages.
        The archive already contains jquery-ui-1.8.23.custom.min.js (it’s inside the jquery directory).

        Reply
  14. Methylene
    Posted on September 25, 2012 at 13:51 Permalink

    Hi,

    I’m using your nice scrollbar plugin but i have a problem.

    I’ve choosen to use it with a custom picture (I have change the dragger and dragger_bar background with a 15×57 picture). My picture appears but i’m unable to scroll “to the end”, there is a blank space between my picture and the end of the dragger rail.

    I’m not really good in english but you can show the problem here :

    http://www.adrien-godel.com/tests/mahi/bio.php

    What can i do ?

    Thanks a lot for your work.

    Reply
    • malihu
      Posted on September 25, 2012 at 15:01 Permalink

      Hi,

      You have this in your CSS:
      .mCSB_horizontal .mCSB_scrollTools .mCSB_dragger{ height:100%; }

      It should probably be the height of your .mCSB_dragger_bar (57 pixels). Check the following image to get an exact blueprint of the custom scrollbar markup:
      http://manos.malihu.gr/wp-content/uploads/2012/07/scrollbar_layout.png

      Reply
      • Methylene
        Posted on September 25, 2012 at 16:35 Permalink

        Hi again Malihu, and thanks for your answer…

        I don’t really understand, my scrollbar is vertical, I think the values are correctly set :

        .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:15px; height:57px; margin:0; text-align:center; }

        But it still does not work ?

        Reply
  15. Srinivas
    Posted on September 25, 2012 at 13:50 Permalink

    Thank you, great plugn, well explained with exaples, very easy to impliment.

    Reply
  16. Vladimir Minkin
    Posted on September 24, 2012 at 18:08 Permalink

    I have trouble with work of that nice plugin after fade transition animation on them. I use a TweenLite for animate a div witch content a text, and hide them from the screen (shift them to the bottom and off the screen) .
    TweenLite.to(currentView, 1, {css:{opacity:0, top:window.innerHeight}, onComplete:function(){
    currentView.hide(currentView.find(“.data”))
    $(currentView).css(“display”,’none’);

    currentView content a text wrapped by another 3 divs

    Can you help me to solve that problem?

    Reply
  17. Cedric
    Posted on September 24, 2012 at 12:05 Permalink

    I’m trying to use it in a nested div where the inner one is bigger than the outer one, but the scrollbar remains deactivated, even when defining fixed sizes for both. When looking at the code, the .mCSB_container-div also has the css class .mCS_no_scrollbar, which looks like it’s intended for elements of a size that don’t require any scrolling.
    Any idea what’s the problem here?

    Reply
    • Alan
      Posted on October 10, 2012 at 18:47 Permalink

      I am also interested in knowing the answer to the above question…
      Is there any way to deactivate the use of the “mCS_no_scrollbar” class??

      Reply
  18. Greg
    Posted on September 23, 2012 at 00:05 Permalink

    I have an issue that doesn’t seem to be addressed here. It does not work when the page is in an iframe. In Chrome it sort of works but doesn’t have the animation, in IE it doesn’t scroll at all.

    Reply
  19. Nevin
    Posted on September 21, 2012 at 21:49 Permalink

    Hi Malihu,

    Is there a way to force the scrollbar even when the content doesn’t exceed past the browser window?

    Thanks!

    Reply
    • malihu
      Posted on September 22, 2012 at 09:46 Permalink

      No. The scrollbar attaches only when it’s functional (content needs scrolling). Maybe you could give your content a bottom margin or padding to accomplish what you want.

      Reply
  20. Lai
    Posted on September 21, 2012 at 19:28 Permalink

    Hi Malihu,

    I have tried to apply this scroll bar to my work. It seems there, but it is not appearing at first load. The vertical scrollbar only appear after I try to zoom in or zoom out. May I know what is the possible problem and possible solution?

    Thanks

    Reply
  21. Andrew
    Posted on September 21, 2012 at 19:14 Permalink

    Hi,
    First of all thanks for a fantastic plugin!

    I’m using your script on my latest project but have run into a problem and was hoping you could help.

    I’m using a form inside the scroller. When I first click the form’s submit button, the page scrolls to the top. When I try a second time the form submits. The form can be seen at http://www.whitedoorevents.co.uk/contact-us

    How can I stop this behavior?

    Thanks for any help!!

    Reply
    • malihu
      Posted on September 21, 2012 at 19:49 Permalink

      Hi Andrew,
      I think the auto-scrolling happens due to some of your elements positioning. The easiest way to fix this, is probably by removing position:relative from .form fieldset.

      Reply
      • Andrew
        Posted on September 21, 2012 at 19:57 Permalink

        Thanks Malihu, that’s worked!

        Reply
  22. Athanasia
    Posted on September 21, 2012 at 16:45 Permalink

    Hello there,

    Thank you for sharing and keep on improving and supporting such a useful plugin!
    I am struggling a day now with a strange bug(?) on firefox. Everything works great in any other browsers except firefox.
    I noticed that the js is not executed after class mCustomScrollbar _mCS_1 is added on the div that scrolling is needed. Have you ever faced a problem like that?

    Thanks in advance!

    Reply
    • malihu
      Posted on September 21, 2012 at 17:54 Permalink

      Not really…
      Check your page with Firebug addon and see if get any console errors.

      Reply
      • Athanasia
        Posted on September 24, 2012 at 14:28 Permalink

        Thanks for replying!
        Yes, I have some errors on my console but I can’t find out have they might be related to this.
        The errors are these:

        - Unknown property ‘box-sizing’. Declaration dropped. @ ………/jquery.mCustomScrollbar.css:21
        - Unknown property ‘-moz-border-radius’. Declaration dropped. @ ………../jquery.mCustomScrollbar.css:31
        - Error in parsing value for ‘filter’. Declaration dropped. @ …………/jquery.mCustomScrollbar.css:61
        - Selector expected. Ruleset ignored due to bad selector. @ …………/jquery.mCustomScrollbar.css:69

        At first I thought that maybe it’s this ff bug with box-sizing and min-width but I don’t have anymore min-widths…

        Reply
        • Athanasia
          Posted on September 26, 2012 at 16:24 Permalink

          I just found out ,that some of my custom js was conflicting with plugin’s code..
          Now it works great. Thanks again!

          Reply
  23. Carlo
    Posted on September 21, 2012 at 11:28 Permalink

    Hi,
    any way to make the scrollbar appear on the right border of the div I applied it on?

    Reply
    • malihu
      Posted on September 21, 2012 at 13:47 Permalink

      Hi,
      Not really sure what you mean, but the plugin cannot place the custom scrollbar outside of the element you’ve applied to (it cannot possibly know the rest of your page markup). You can wrap your content within another div or use .mCSB_container (which contains your content) to apply the styling you want.

      Reply
      • Carlo
        Posted on September 21, 2012 at 15:00 Permalink

        Thanks for your answer :)

        I’ll try to explain better: I am applying the custom scrollbar to a .content div. This div has just a border around. I’d like to put the draggable element of the scroll bar on the right border.

        Reply
        • malihu
          Posted on September 21, 2012 at 16:05 Permalink

          If you want to place the scrollbar exactly on top of the right border, you probably need to apply the border on the .mCSB_container (instead of .content) and set .mCSB_scrollTools left position accordingly.

          Reply
  24. Ilyon
    Posted on September 20, 2012 at 23:25 Permalink

    Hello, malihu!

    You’ve got a great plugin! Everything works ok, but I’m trying now to find solution for “scrollTo” option in your plugin. I use WP and want to scroll page to anchor when the user click on “Comments” links; so, I need to move to the bottom of the page with this code: $('.comments_anchor').mCustomScrollbar("scrollTo","#comments");, but I get Firebug error: mCSB_dragger.position() is null.

    Any help will be appreciated!

    Reply
    • Ilyon
      Posted on September 22, 2012 at 14:11 Permalink

      I’m still waiting for your feedback!

      Reply
    • malihu
      Posted on September 22, 2012 at 14:48 Permalink

      Hi,

      Have you applied the plugin on .comments_anchor?
      $('.comments_anchor').mCustomScrollbar();

      Reply
  25. Nevin
    Posted on September 19, 2012 at 21:33 Permalink

    The scroll amount doesn’t work…even in your demo, http://manos.malihu.gr/tuts/custom-scrollbar-plugin/scroll_buttons_and_snap_scrolling_examples.html. It only moves the default 40px.

    this is what i’m trying to do…
    scrollButtons: {
    enable: true,
    scrollType:”pixels”,
    scrollSpeed:400
    }

    Reply
    • malihu
      Posted on September 20, 2012 at 06:06 Permalink

      On that demo, the scroll buttons move the content by 116 pixels (not 40). You need to set the scrollAmount option parameter to the amount of pixels you want:
      scrollButtons:{ enable:true, scrollType:"pixels", scrollAmount:400 }

      On the code you posted you’ve set scrollSpeed which is the speed of continuous scrolling (not the amount of pixels to scroll).

      Reply
      • Nevin
        Posted on September 20, 2012 at 21:04 Permalink

        Thanks for you’re response! I realized I was measuring the amount the dragger_bar moved not the content. The content does move the set amount. I see I typed the wrong parameter in the comment.

        Thanks again!

        Reply
  26. Cyber
    Posted on September 19, 2012 at 19:22 Permalink

    Hi there,

    For some reason, I don’t get the smooth scrolling on Chrome. Any ideas? It works fine on other browsers… thanks a lot!

    PS: THANK YOU for this plugin!

    Reply
    • malihu
      Posted on September 20, 2012 at 06:13 Permalink

      Hello,
      Do you mean the animation performance in Chrome is not so good compared to the other browsers? If yes, then it’s probably some styling element (e.g. box-shadows) that makes Chrome engine struggle.

      Reply
  27. Matt
    Posted on September 19, 2012 at 13:52 Permalink

    Heya,

    I have implemented your plugin on my own site – works really great :)

    Just one thing, Im trying to get it to scroll back up to the top but I cannot get that functionality to work.

    I am calling the following code;

    jQuery(“#mcs_container”).mCustomScrollbar(“scrollTo”,”top”);

    but nothing is happening. Any ideas why? :) thankyou!!

    Reply
    • malihu
      Posted on September 20, 2012 at 06:19 Permalink

      Hi,

      Judging by your selector id, I assume you’re using the old version of the plugin (version 1.x). The scrollTo method (and the entire guide in the first page of the post) is for the 2.x plugin version only.

      Reply
      • Matt
        Posted on October 22, 2012 at 17:58 Permalink

        Hello Sir,

        Yes V2 worked a treat thankyou :)

        Reply
  28. dejan
    Posted on September 18, 2012 at 12:58 Permalink

    I can’t make it work on IE 7. Even if I try with your example it dosn’t work. I try in IE tester, end IE 9 when I turn of compatibility view.

    And besides, your work is amazing and you helped a lot, not only me, but everyone here.

    Tnx again, and sorry for my English :)

    Reply
    • malihu
      Posted on September 18, 2012 at 13:05 Permalink

      Hello,

      What exactly doesn’t work? I’ve checked the script with ie7 (on win xp virtual machine) and the scrollbar itself seem to work, except for some CSS rules.

      Reply
      • dejan
        Posted on September 19, 2012 at 12:07 Permalink

        First I want to thank you for fast answer, I rarely write some comments, but I never got answer faster.

        Okay, I think that all the problems associated with CSS.
        First thing is collapsing some divs MCSB_scrollTools,_dragger,_draggerRail.
        Second problem is when I put some table in horizontal div. Then I can drag scrooler to the end of 10000px even if give table width:auto.
        I hope that I’m gonna find some solution, and tnx to you again.

        Reply
        • dejan
          Posted on September 21, 2012 at 14:04 Permalink

          Hi,

          I just want to tell that I solved the problem with css class in IE7 and it works great. Greetings from Belgrade

          Reply
  29. JayB
    Posted on September 14, 2012 at 04:53 Permalink

    The customer scrollbar plugin is not only great but well presented. Wonderful job.

    One question: I have one scrollbar installed on a single page. When I bring up the page on the web, I initially see the browser’s default scrollbar which switches over to the custom scrollbar evidently after the page has been loaded. Is there any way to prevent this from happening perhaps through a line of code that would disable the browser’s default scrollbar?

    Thanks in advance.

    Reply
    • malihu
      Posted on September 14, 2012 at 21:08 Permalink

      Hello and thanks for your comments :)

      There are two ways to avoid the native scrollbar appear while page is loading:

      a) If you don’t use any images (or other elements with external source) inside your scrolling content, you may call mCustomScrollbar function on document ready (instead of window load). This will apply the custom scrollbar much faster, by the time DOM is ready. I’ve included code examples for both ways in the “How to use it” guide.

      b) Alternatively, you can set your element to overflow:hidden (instead of overflow:auto). This will skip browser’s native scrollbar all together. The only issue with this, is that users with javascript disabled will not be able to scroll your content. If you still need to support disabled js clients, you should add an additional style inside a noscript tag that sets your element to overflow:auto. For example:
      <noscript> <style>.content{overflow:auto;}</style> </noscript>

      Hope this helps

      Reply
      • JayB
        Posted on September 16, 2012 at 03:01 Permalink

        It works perfectly. Thanks for your help. And keep up the wonderful work!

        Reply
  30. Carolina Ramírez
    Posted on September 14, 2012 at 04:24 Permalink

    Hello, I’m a graphic designer and I would use this application for a web design business. What are the conditions for use on a commercial website?

    Reply
    • malihu
      Posted on September 14, 2012 at 05:05 Permalink

      Hi, see the license at the end of the post (Creative commons 3.0).

      Reply
  31. Shane Waugh
    Posted on September 14, 2012 at 03:36 Permalink

    hi…

    I’ve implemented your scripts into my test site on BC and it’s scrolling but i can’t work out why it’s not picking up the styling. It’s only picking up the standard scroll bar…

    Can you point out what i need to change, if anything.

    p.s. Great scrollers!!!

    cheers
    Shane Waugh

    Reply
  32. Michal Bulla
    Posted on September 14, 2012 at 00:04 Permalink

    Hi there, I’m trying to implement this scrollbar, but it’s not working. I did everything – included all files, I calles the function and nothing.

    Here is the link: http://ip-studio.sk/test

    Please help!
    Thank you.

    Reply
    • malihu
      Posted on September 14, 2012 at 02:03 Permalink

      You’ve set media="print" on the link to the jquery.mCustomScrollbar.css:
      <link href="/cms/content/themes/custom/Site/stylesheets/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" media="print" />
      which means the CSS doesn’t load. Just remove it:
      <link href="/cms/content/themes/custom/Site/stylesheets/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
      or add “screen” as the value if you need the attribute.

      Reply
      • Michal Bulla
        Posted on September 14, 2012 at 10:35 Permalink

        Oh, thanks a lot ;)

        Reply
  33. Milen
    Posted on September 13, 2012 at 18:41 Permalink

    Hello! Great scrollbar! I really enjoy it. But i have one question:
    I want the scroller into one box in the web site (where the content is) but I want to be able scroll with the mouse from the all web site, not only from the box. Is it possible?
    Thanks!

    Reply
    • malihu
      Posted on September 14, 2012 at 02:22 Permalink

      Not really. The mouse-wheel event binds on .mCustomScrollBox. That said, you could achieve what you need by manipulating .mCSB_container and .mCSB_scrollTools dimensions and/or position within the CSS. That of course depends heavily on the rest of your page layout.

      Reply
  34. Stefano
    Posted on September 13, 2012 at 18:09 Permalink

    I really appreciate your works!
    I used that in a div centred in the middle of the page.
    I ask you if there’s any way to continue the scrolling action after being arived at the bottom of the div (but, ofcourse, not at the end of the page -> the page still can be scrolled for some length).
    Tanks a lot for any replies.
    Stefano

    Reply
    • malihu
      Posted on September 14, 2012 at 02:11 Permalink

      I see what you mean. Currently there’s no way for such mouse-wheel behavior. I’ll need to work on that and see how I can implement it in the plugin. Thanks for the feedback.

      Reply
      • Stefano
        Posted on September 14, 2012 at 14:02 Permalink

        Thanks a lot!

        Reply
  35. stephen
    Posted on September 13, 2012 at 14:42 Permalink

    I”m having an issue fading divs on scroll.

    In want to fade divs when I move this scrollbar. I’d like them to instantly fade out when there is a change on the scroller and then fade back in.
    Also I’d like to stop this function from happening on the .stop event for the scroller

    Reply
    • malihu
      Posted on September 14, 2012 at 02:34 Permalink

      If I understand correctly, you cannot do that as there’s only one onScroll callback which runs when a single scroll is completed. For what you need, it would require an onScrollStart and an onScrollEnd callbacks which I’m not sure is possible to implement. Moreover it would greatly affect performance, especially when fading in and out content every few milliseconds.

      Reply
  36. Don
    Posted on September 12, 2012 at 07:27 Permalink

    Is there a way to set the scrollbar so that it’s always visible? Right now, I’m trying to use the scrollbar with some expanding content. The problem is that the collapsed content isn’t large enough to activate the scrollbar when the page first loads. And when the content does expand, it fails to activate the scrollbar after the fact. Thoughts?

    Reply
    • malihu
      Posted on September 12, 2012 at 09:34 Permalink

      You need to call the update method of the plugin after your content is expanded (and is long enough to need a scrollbar).
      Example: $(".content").mCustomScrollbar("update");

      For more info and working examples please read “Plugin methods: update”. You may also find related info in “Configuration” and “Additional info” sections of the post.

      Reply
  37. SHiN
    Posted on September 11, 2012 at 14:39 Permalink

    hi,

    how can i use this plugin with fancybox
    i want to change scrollbar in fancybox

    Thankyou :)

    Reply
    • malihu
      Posted on September 11, 2012 at 15:31 Permalink

      I cannot really provide specific instructions for using the plugin on markup generated by other scripts, plugins or applications. The implementation guide is the same for any element you want to add custom scrollbar. You probably need to find the overflow:auto div generated by fancybox and call mCustomScrollbar function on it.

      Reply
      • SHiN
        Posted on September 12, 2012 at 08:50 Permalink

        hi

        i got it.
        Thank you so much for your reply.

        Thank you :)

        Reply
  38. Chip Cheezum
    Posted on September 11, 2012 at 07:56 Permalink

    Hi, I’m using this in my site http://chipandironicus.com/ , but I’m having a few problems. It appears to work fine in Chrome, Safari, and Firefox, but I’m having problems with it in Internet Explorer 9 and Opera. In IE9, sometimes the scrollbar never appears and/or the content in the div overflows onto the rest of the site. This is seemingly random and I can’t get it to happen consistently, but it happens enough that it’s a problem. Sometimes it gets fixed if you refresh it a lot. The scroll bar seems to disappear more often if you are on a video page like this one: http://chipandironicus.com/videos/condemned/1.html and click the X button to go back to the index. Sometimes the content won’t overflow its div, but the scrollbar will still not appear. This also appears to be random.

    The problem in Opera is a little different. If I am on a page with the scrollbar and click on a link that takes me to another page with a scrollbar, it’s fine. But if I then click the browser’s back button, the previous page will not have the scroll bar and the content will again overflow. The scrollbar is fine if you click on a link that takes you to the page, it only breaks when you click on the browser’s back button.

    I’m not much of a coder so I can’t quite figure out what’s going on, but is there something wrong with the way I’m calling the scripts? For both Internet Explorer and Opera it seems like the problem is that the scripts aren’t being loaded.

    Reply
    • malihu
      Posted on September 11, 2012 at 12:33 Permalink

      Hi,

      I cannot reproduce the issue regarding browser’s back button on Opera (version 12.02). I checked your pages with IE9 developer tools and I get “‘mCustomScrollbars’ is undefined” error (inside document ready, you’re calling mCustomScrollbars() which does not exist). Try removing it as it might break your pages. I also get more than one js errors when I click the close button of the video (probably video player errors).

      Reply
  39. Erwin
    Posted on September 11, 2012 at 01:48 Permalink

    That’s an amazing plugin!
    Anyway, I need to get the width set by the plugin.
    I’ve been using the plugin in a table which is responsive, so when it increase horizontally (resizing the browser), it “stop” increasing when the initial width set by the plugin is reached.
    For instance, my initial screen is 1024 x 800 and my table is 1400px, the plugin set the width of his content in 1400px and applies properly scroll (all right so far). But when my screen increase horizontally (1800px for example) the table doesn’t seem to responde to it and stop when it reachs 1400px and a wasted space (400px) on the right appears.
    I’m starting with Jquery and I find that if the plugin applies min-width instead width to the container, it would be perfect. Or if it’s not possible, then how can I get the width set by the plugin.

    Sorry if my english is not good enough :) But it’s not my native language.
    Thanks!

    Reply
  40. Gustav
    Posted on September 11, 2012 at 00:07 Permalink

    Hi!

    I’m currently using your plugin on a website. Everything works great except in chrome on windows. There I get a wierd scrolling effect (the content “bounces back”) and sometimes the content will get a “position:left” of several million putting the content way off the browser window.
    See here for an example: http://marico-design.com/portfolio/category/design/

    Any ideas?

    Thanks for a great plugin!

    Reply
    • malihu
      Posted on September 11, 2012 at 00:58 Permalink

      Hi,

      I can’t seem to reproduce the bouncing-back scrolling. I checked your page on Chrome version 21 (21.0.1180.89) on Windows 7 and scrolling (as well as the hover effects inside it) are very smooth.

      Reply
      • Gustav
        Posted on September 11, 2012 at 01:13 Permalink

        Thanks for the quick reply.

        I found out what was causing it… My stupid mistake.
        Chrome was slightly zoomed in ( 110% zoom ). As soon as I changed that it worked great there too.

        Reply
  41. Lennie Moore
    Posted on September 9, 2012 at 23:19 Permalink

    So everything’s coming together pretty well with this plugin. I’ve got it working with scrolling, scrollbuttons, and also added up/down cursors doing the same thing as the scroll buttons on this page:
    Credits

    Anyone wanting similar functionality, feel free to steal from my page :)

    I’m now working on my blog page, where I want to have anchor links in my .sidebar div that will have the scroller scrollto each blog post but I must be not understanding how to do this properly. I’ve tried the js code in Simon Dau’s ,a href=”http://www.blog.kartogram.co.uk/post.cfm/custom-functionality-for-custom-scrollbar”>page but am having trouble.

    You can see how I originally had it working using jquerytools here:
    Old Blog
    With this toolset I was able to just have my anchors in a typical html format (located in my .sidebar div) and the content would jump to the right place.

    Where I’m at now:
    Test Blog

    The functionality I’m needing is:
    1. scrollto anchors residing in the .sidebar with a naming convention of #itemnnn where nnn=numbers from 000-999 (allowing for lots of content obviously). Example would be #item123
    2. scrollto next and prev buttons which could be located either in the .content window or the .sidebar (not sure which way I’ll go here). This method would be for jumping to the next item no matter what number it is on a page such as my News page.

    Any help would be tremendously appreciated. I’m so close to having the infrastructure solid here this would mean I can finally launch my site soon!

    Reply
    • malihu
      Posted on September 10, 2012 at 01:17 Permalink

      Hi again Lennie,

      Simon Dau’s code is an awesome extension for the previous version (1.0) of the plugin. On the current version (2), which is the one you’re using, I’ve implemented a pretty versatile scrollTo method that allows you to do what you describe.

      You may need to read the “Plugin methods: ScrollTo” section on the post that explains how to use it to scroll-to any specific position within your content.
      In short, you can do something like:

      $("#yourLinkID").click(function(e){ e.preventDefault(); $(".content").mCustomScrollbar("scrollTo","#item123"); });

      On the example above, when the #yourLinkID is clicked, the custom scrollbar will scroll-to the position of #item123 element inside your .content.

      For the next/previous links, you should probably add a script that finds the next element to scroll-to (e.g. using jQuery $.next() function) and change ScrollTo target accordingly (same with previous).

      Your links can be anywhere in your document (inside or outside the element with the custom scrollbar).

      Reply
      • Lennie Moore
        Posted on September 10, 2012 at 03:22 Permalink

        Cool, thx. I’ll get to work on this.

        Reply
      • Lennie Moore
        Posted on September 10, 2012 at 10:21 Permalink

        Progress. It’s scrolling to each blog post (thank you for the help!) but for some reason it’s not scrolling consistently to the h2 titles. They drift a bit in their location.

        Check it out here.

        Is it something in one of my scrollAmount settings? Or is it something else? Strange…

        Reply
        • Lennie Moore
          Posted on September 10, 2012 at 20:11 Permalink

          I used a half-baked workaround for now by inserting “ ” spacers at the end of each blog to get it close to what I need. Not an elegant hack.

          It’d be good to know why the scrollto is not consistently going to the right location.

          Reply
        • malihu
          Posted on September 11, 2012 at 00:28 Permalink

          The slightly off scrolling to headings position, happens probably because of the way CSS handles element margins that overflow their container.

          Try removing
          <a id="item008"></a>
          and add those ids on your divs. For example:
          <div id="item008"> <div class="blogitem"> ... </div> </div>
          or
          <div> <div id="item008" class="blogitem"> ... </div> </div>

          There are a few things you can also try like giving .blogitem and/or its parent divs overflow:hidden, “playing” with position:relative on the anchors and divs etc. but I think the above will fix any scroll-to position issues.

          Reply
          • Lennie Moore
            Posted on September 11, 2012 at 04:13 Permalink

            bummer. none of this seems to work. I did change the ids to the divs that makes more sense. Been tweaking the css and looking for the culprit but have found nothing so far.

            btw thank you for the time in helping me on this. If you look on my blog on the “About This Website” post you’ll notice I’m going to be giving you a serious plug.

            current blog page

          • malihu
            Posted on September 11, 2012 at 13:06 Permalink

            Can’t thank you enough :)

  42. Bigorangemachine
    Posted on September 7, 2012 at 18:25 Permalink

    Love the plugin!
    Small issue
    If you use ‘scrollTo’ hook and use an int of 0; than it won’t scroll.

    in jquery.mCustomScrollbar.js
    Line 600 needs to be changed
    if(scrollTo){
    to
    if(typeof(scrollTo)!=’undefined’){
    or
    if(typeof(scrollTo)==’string’ || typeof(scrollTo)==’number’){

    Reply
    • malihu
      Posted on September 7, 2012 at 18:36 Permalink

      Yes, instead of 0, use “top” (or “left” for horizontal scrollbar).

      Reply
  43. David
    Posted on September 7, 2012 at 18:07 Permalink

    Great plugin, sir. Excellent documentation. I am using it on my blog but maybe I will be able to use it for work one day if I get another web development project.

    Reply
  44. Baraneedharan
    Posted on September 7, 2012 at 15:59 Permalink

    Hello,

    I have container whose height is say 400 and overflow hidden. I also have a READ MORE button. When i click on read more i am enabling the plugin. Likewise i need to disable the plugin when i click READ LESS. Can it be achievable ?? Please help . Thanks in advance :)

    Reply
    • malihu
      Posted on September 7, 2012 at 17:56 Permalink

      You can increase or decrease your content height each time you click “read more” and “read less” accordingly. When your content is shorter than its container then the scrollbar is disabled (as no scrolling is needed). After plugin initiates, your original content resides within the .mCSB_container div (this div has by default overflow:hidden). Changing its height will do what you need.

      Reply
  45. Will
    Posted on September 7, 2012 at 01:57 Permalink

    Hi dude. I have a modal and a button on the site. if i click the button, the modal shows up. inside the modal, there’s the div i want the scrollbar to show up. However, pressing the button doubles the scrollbar. Any fix for this?

    $("a[rel='show-content']").click(function(e){ e.preventDefault(); $("#content_1").fadeToggle("slow",function(){ var customScrollbar=$("#content_1").find(".mCSB_scrollTools"); customScrollbar.css({"opacity":0}); $("#content_1").mCustomScrollbar("update"); customScrollbar.animate({opacity:1},"slow"); }); });

    I’ve been experimenting for 5 hours straight. :D

    $("#content_1").mCustomScrollbar();
    that code gives the div the scrollbar, is there a reverse way for this? Thanks in advance sir!

    Reply
    • malihu
      Posted on September 7, 2012 at 04:04 Permalink

      Hello,

      I’m guessing you’re calling $("#content_1").mCustomScrollbar(); before your click event function, correct? When you say doubles the scrollbar, you mean you get 2 scrollbars?

      Can you send me a link to check the code? I can’t really be much help otherwise.

      Reply
  46. chris
    Posted on September 6, 2012 at 13:46 Permalink

    Very inspiring to me. It brings some Ideas to my mind.

    Since I’m not a coder, just a Foto/Video Guy – may I ask possibly dumb questions?

    like:
    Performance- and functionional- wise, where to place the js-Scripts best in a WordPress-Theme? Globally? Like in the Header for the whole Page anytime?

    Or better within in the Articles just where I want them?

    and better than educate everybody:
    :) Couldn’d you “just” make a WP-Plugin with Shortcode-support for dumb folks like mine? I wouldn’t mind paying/donating for such. You seem capable!

    Reply
    • malihu
      Posted on September 6, 2012 at 18:28 Permalink

      Hi Chris,

      Depends on how often you’ll use the plugin in your WordPress and if you already have jQuery and jQuery UI loaded in your header or functions.php.

      If you only plan on using it on some widget or specific page and you don’t need jQuery UI for other plugins, then you should probably include it only on the templates you want.

      If you already using jQuery (and especially jQuery UI) for other plugins and/or plan to use the plugin often on any article, then you should include it in your header or functions.php.

      jQuery is included by default in latest WordPress, so if you already use jQuery UI then the rest of the plugin files are something like 25kb, no big deal on loading times.

      Another way would be to create 2 templates for your theme. One without the plugin and one with it. This way you could easily select the template you want for each of your posts, according to its content.

      I’ll probably release a WordPress plugin at some point. I just need the new plugin version to be implemented and used as much as possible so I can get feedback and fix any errors or make additions before I release it for WordPress.

      It doesn’t seem much work at first, but each time I change code, I need to update local files, remote files, github etc. Add WordPress repository and multiply by x number of plugins and it adds up very quickly! That’s why I try to go slowly and avoid releasing jQuery and WordPress plugins at the same time.

      Reply
      • Chris
        Posted on September 11, 2012 at 13:34 Permalink

        Thank you for your time answering me!

        And thank you for the suggestions. I’ve put it in the functions.php. My longtime Goal is a compact Onepage Portfolio with a Slider Window per Article for Pictures/Video avoiding too deep Navigation and those Modal Windows (wich I find often too slow and irritating as a Userexperience)

        I understand that it is a lot of work! Just wanted to let you know that it is much apreciated. And also thank’s for the good documentation. I personally may not be able to understand everything but that’s my learning curve now :)

        And as I sayd: allthough I appreciate Free Software (and OpenSource Concepts in particular for Core Technologies) I shurely would spend some money on a convenience-raising Backend User Interface that enables me being creative without going into much coding (or finding and hiring a dedicated Programmer for it). For instance like shortcodes for the TinyMCE to embed the Customscrollbar with different options, choosable or custom uploadable graphics, automatic theme setup…

        but maybe i’ll learn some more html/css/js – it looks interesting.

        All the Best, Chris

        Reply
  47. Marc-Andre Cote
    Posted on September 6, 2012 at 01:55 Permalink

    Hi, is it possible to make a scrollTo with choosing coordinate like : scrollTo_x and scrollTo_y?
    Actually, I was able to scroll verticaly with a integer value but not horizontaly…

    Reply
    • malihu
      Posted on September 6, 2012 at 18:42 Permalink

      Hi,

      You cannot scroll to position horizontally and vertically at the same time, since the plugin does not support scrollbars for both axis on a single element.

      Reply
  48. James Endersby
    Posted on September 5, 2012 at 17:42 Permalink

    Hi,

    Great code. However I have noticed that the custom scrollbars do not show up on tablet PC or iPads.
    Is their a correction for this?

    Many thanks

    Mediagrin

    Reply
    • malihu
      Posted on September 6, 2012 at 18:38 Permalink

      Hi,

      I’ve intentionally avoided using custom scrollbars on touch devices cause I don’t want to mess with usability and the way users scrolling.

      The plugin checks for touch devices and applies overflow: auto css rules, as well as -webkit-overflow-scrolling: touch to the content block so it can be scrolled natively by swiping.

      Reply
      • James Endersby
        Posted on September 6, 2012 at 20:14 Permalink

        Fair play and that makes sense.
        Thanks for your replay.

        Reply
  49. Pinto
    Posted on September 5, 2012 at 13:38 Permalink

    I, thx for u’r script, he is very amazing.

    But I want apply-it for scroollbar left! with the direction=”rtl” he won’t work it at left.

    How I can do ?

    Thx

    Reply
    • malihu
      Posted on September 5, 2012 at 16:30 Permalink

      You can set the scrollbar on the left of your content by changing the position of .mCustomScrollBox .mCSB_scrollTools within the jquery.mCustomScrollbar.css. You’d also need to set a left-margin for the .mCSB_container. For example:
      .mCSB_container{ width:auto; margin-left:30px; overflow:hidden; } .mCSB_container.mCS_no_scrollbar{ margin-left:0; } .mCustomScrollBox .mCSB_scrollTools{ width:16px; height:100%; top:0; left:0; }

      Reply
      • Pinto
        Posted on September 5, 2012 at 17:28 Permalink

        It’s working, thank’s for all. =)

        Reply
  50. JSirius
    Posted on September 3, 2012 at 17:59 Permalink

    Hello,

    I’m using your script to scroll a list and when I switch stylesheet with :
    $("link[rel=stylesheet]").attr("href",$(this).attr('rel'));

    After used the switcher, the scroolbar disappears and the list scroll to the last item. Then I can’t use the mouse or drag’n'drop…

    I try to use update method after switch, but it doesn’t work!

    Thank in advance…

    Best Regards
    Julien

    Reply
    • malihu
      Posted on September 4, 2012 at 14:47 Permalink

      I can’t really know where the problem could be. Can you post a link so I can check it?

      Reply
      • JSirius
        Posted on September 4, 2012 at 15:25 Permalink

        Hello,

        You can download my project here : http://dl.free.fr/fCR6xcUgb
        Open “index.htm” and click on “Theme 1″ and “Theme 2″ to switch CSS.
        I use your script for the left side.
        In the file :
        - L.98 : code to switch css
        - L.143 : transform to mCustomScrollbar

        Thank you to have respond!
        Julien

        Reply
      • JSirius
        Posted on September 4, 2012 at 15:51 Permalink

        I made you a smaller projet :
        http://dl.free.fr/qEZicY5GK

        Reply
  51. Lennie Moore
    Posted on September 3, 2012 at 08:44 Permalink

    Cool plugin! Lots of potential for what I can use on my website.

    I’m having a problem (mostly because I’m a composer and NOT a javascript programmer) getting the plugin to work. I can access the plugin fine and customize how it’s looking but my content disappears as soon as I use the scrollbar or mousewheel? Not sure what that’s about. I also can not access the arrow images from your png file.

    Any help would be appreciated. My test web page for this is:
    http://www.lenniemoore.com/credits_test.html

    Thanks!

    Reply
    • malihu
      Posted on September 3, 2012 at 14:26 Permalink

      Hi,

      It seems that you’ve hard-coded the custom scrollbar markup, which the plugin creates automatically. Your content markup should only have your own content. For example in your page it should be:

      <article class="substance"> <section id="scrolltext"> <div class="content"> <div class="item"> ... </div> <div class="item"> ... </div> <div class="item"> ... </div> </div> </section> </article>

      You don’t need to insert any of the divs that have to do with the scrollbar. The script does everything else.

      Reply
      • Lennie Moore
        Posted on September 3, 2012 at 17:58 Permalink

        Awesome. I knew it was something stupid on my end. I misunderstood the html examples above.

        Thanks for saving a composers life.

        Reply
        • malihu
          Posted on September 3, 2012 at 20:04 Permalink

          Firstly thanks a lot for your donation. It greatly helps me focus on creating and supporting free software.

          Off-topic:
          When I checked the code on your page I was, as usual, seeing only the code… I didn’t notice you’re the composer of such awesome music until I took a more “relaxed” look and saw Outcast video game on the list!
          Oh man! I loved your work on Outcast and I cannot even express myself on how much I absolutely love Watchmen motion comic OST. Seriously, I’m a big fan of your music.

          Thanks for being a composer :)

          Reply
          • Lennie Moore
            Posted on September 4, 2012 at 21:22 Permalink

            LOL Thanks for the kind words and for making such a great plugin. I’m happy to donate to the cause.

            I’m still trying to figure out why I don’t see any scroll button arrows from the .png file. I’ve put it in several directories on my server just in case the plug is looking in a particular location but I think the problem is somewhere in how I coded either the js or html. I probably have to turn something on eh?

            $(window).load(function() { $(".content").mCustomScrollbar({ set_width:true, set_height:true, horizontalScroll:false, scrollInertia:660, scrollEasing:"easeOutQuart", mouseWheel:"auto", autoDraggerLength:true, scrollButtons:{ enable:true, scrollType:"pixels", scrollSpeed:80, scrollAmount:302 }, advanced:{ updateOnBrowserResize:true, updateOnContentResize:true, autoExpandHorizontalScroll:false }, callbacks:{ onScroll:function(){}, onTotalScroll:function(){}, onTotalScrollOffset:0 } }); });// $avaScript Document

          • Lennie Moore
            Posted on September 4, 2012 at 22:39 Permalink

            Figured it out. I didn’t have the css correct.

            You should also consider adding the following comments into the css file:

            .mCSB_scrollTools .mCSB_buttonUp{ background-position:96px,0; /* buttonUp locations are 0 0/16px 0/32px 0/48px 0 (white) and 80px 0/96px 0/112px 0/128px 0 (black) */ } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0px; background-position:96px -20px; /* buttonDown locations are 0 -20px/16px -20px/32px -20px/48px -20px (white) and 80px -20px/96px -20px/112px -20px/128px -20px (black) */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position:100px -40px; /* buttonLeft locations are 0 -40px/20px -40px/40px -40px/60px -40px (white) and 80px -40px/100px -40px/120px -40px/140px -40px (black) */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position:100px -56px; /* buttonRight locations are 0,-56px/20px -56px/40px -56px/60px -56px (white) and 80px -56px/100px -56px/120px -56px/140px -56px (black) */ }

          • Lennie Moore
            Posted on September 4, 2012 at 23:36 Permalink

            Oops! Ignore that last note. I listed the wrong coordinates. I believe these will work better:

            .mCSB_scrollTools .mCSB_buttonUp{ background-position:0 0; /* buttonUp locations are 0 0/-16px 0/-32px 0/-48px 0 (white) and -80px 0/-96px 0/-112px 0/-128px 0 (black) */ } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0px; background-position:0 -20px; /* buttonDown locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (white) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (black) */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position:0 -40px; /* buttonLeft locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (white) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (black) */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position:0 -56px; /* buttonRight locations are 0,-56px/-20px -56px/-40px -56px/-60px -56px (white) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (black) */

        • malihu
          Posted on September 5, 2012 at 01:16 Permalink

          Good idea. I’ll put the dark and light buttons css locations in the stylesheet for reference. Thanks!

          EDIT: Done.

          Reply
  52. Eric Buckley
    Posted on September 2, 2012 at 12:42 Permalink

    Hi, this plug-in is very well put together and complete. I’m very impressed. I am trying to use it on a project where we have “tabbed content” using jQuery.

    The code for the tabbed content looks like this:
    $(".mission-content").hide(); $("ul.mission-menu li:first").addClass("active").show(); $(".mission-content:first").show(); $("ul.mission-menu li").click(function(e) { e.preventDefault(); $("ul.mission-menu li").removeClass("active"); $(this).addClass("active"); $(".mission-content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn("slow",function(){ $(".mission-text").mCustomScrollbar("update"); }); });

    The HTML markup looks like this:

    <ul class="mission-menu"> <li><a href="#tab_1">Tab1 Menu Title</a></li> <li><a href="#tab_2">Tab2 Menu Title</a></li> </ul> <div id="main-content"> <div id=tab_1" class="mission-content"> <h2>Some title</h2> <div class="mission-text"> Lorem ipsum................ </div> </div> <div id=tab_2" class="mission-content"> <h2>Some title</h2> <div class="mission-text"> Lorem ipsum................ </div> </div> </div>

    The tabs work fine and the scrollbar shows up fine on the first tab. But even with the “update” element in the tab jQuery ccode, it refuses to add in the scrollbars when the second tab is clicked.

    What am I missing here?

    E.

    Reply
    • malihu
      Posted on September 2, 2012 at 18:44 Permalink

      Hello,

      I assume you have applied custom scrollbars to all your .mission-text elements like this:
      $(".mission-text").mCustomScrollbar();
      Is this correct?

      Make sure .mission-text have a height value. Also, you can call the update method only on the active tab like this:
      $(activeTab).fadeIn("slow",function(){ $(this).find(".mission-text").mCustomScrollbar("update"); });

      An alternative way would be to apply a single custom scrollbar only on .main-content (which should have a height value specified and probably overflow:auto):
      $(".main-content").mCustomScrollbar();
      and update it:
      $(activeTab).fadeIn("slow",function(){ $(".main-content").mCustomScrollbar("update"); });
      This way, you use a single scrollbar instead of multiple ones for each tab.

      Reply
      • Eric Buckley
        Posted on September 4, 2012 at 14:41 Permalink

        Thank you Malihu. You are a star!

        Yes, I did have the command to apply the scrollbars already in the code.

        Just using your reformed jQuery code solved my problem. I knew I was missing something there.

        Recommendations and a donation is on it’s way. I really appreciate you’re work here.

        Cheers.

        Reply
  53. Yasen
    Posted on September 1, 2012 at 15:37 Permalink

    Hello. Im making one new website – http://radiorock-bg.com/test/darin/ . The design is not finished yet. I really liked your custom scrollbar and I want to use it but something is going wrong… I followed the steps here – http://manos.malihu.gr/jquery-custom-content-scroller but nothing happen. Please, can you help me a little bit…?

    Reply
    • malihu
      Posted on September 1, 2012 at 17:19 Permalink

      Hello,

      In your CSS, you must give .content a height value (pixels, percentage etc.) instead of just max-height.

      If you don’t want to define a specific height value and use only max-height, please see the following example and view its source to get the additional code:
      http://manos.malihu.gr/tuts/custom-scrollbar-plugin/maxheight_example.html

      Reply
      • Yasen
        Posted on September 1, 2012 at 18:06 Permalink

        Thanks man! It works :)

        Sorry, can you remove or edit my post, `cuz I posted my contact data there…

        Reply
        • malihu
          Posted on September 1, 2012 at 19:13 Permalink

          Of course. Removed.

          Reply
  54. e-zheg
    Posted on September 1, 2012 at 12:52 Permalink

    Hello, do your script support both vertical and horisontal scroll?
    i’ve got page >8000x>13000px and do not want to use standart scrollbars…

    Reply
    • malihu
      Posted on September 1, 2012 at 17:22 Permalink

      Nope, only one axis scrolling on a single element.

      Reply
  55. Atif Meer
    Posted on August 30, 2012 at 14:14 Permalink

    Like this plugin and also detailed explaination.
    Wish you best of luck.

    Reply
  56. Sebastien
    Posted on August 30, 2012 at 12:42 Permalink

    Hey !

    So I am trying to use this plugin, looks great, but I just can’t seem to get it working !
    I have a simple div with overflow:auto; a height and a width, and I just can’t seem too scroll…

    I was on jquery 1.8.0, but since the comment above said it wasn’t working with it I tried with 1.7.1 and still can’t get it working.

    Do you think you could have a look ? Here’s the web page: http://pbmaintenance.fr/produits.php

    It shows up but I just can’t scroll.

    Thanks in advance !

    Reply
  57. bloor
    Posted on August 30, 2012 at 11:28 Permalink

    Not working with jQuery 1.8 even though i receive no console errror at all ._.
    … it took me 2h to realise it was the jQuery’s fault :[

    Reply
    • malihu
      Posted on August 30, 2012 at 15:47 Permalink

      Hi,

      It does work with jQuery 1.8. Try to use jQuery 1.8 with the latest version of jQuery UI (1.8.22 or 1.8.23).

      EDIT: I’ve included jquery-1.8.0.min.js and jquery-ui-1.8.23.custom.min.js in the download archive.

      Reply
  58. William
    Posted on August 30, 2012 at 02:02 Permalink

    Lovely work! Thank you Sir.

    I’ve implemented your slider. It’s slotting in really easily, but I’m having an issue in Chrome, the images judder when sliding. FF & IE9 are working well.

    You can see the page here http://wgmphoto.com/21c. If you click on the red 21C I slide out a pane which has the slider.

    The images are a bit big and will be reduced in the final version, but I don’t believe that should cause what I’m seeing.

    Can you see the issue / a solution?

    Thanks again, W.

    Reply
    • malihu
      Posted on August 30, 2012 at 16:01 Permalink

      Hello,

      Images judder is due to browser’s engine performance.
      You could reduce the images and maybe remove box-shadow (CSS shadows have big impact on performance esp. in Chrome).
      You could also try setting scrollInertia option parameter to zero, which removes the scrolling easing:
      scrollInertia:0

      Reply
  59. Clément
    Posted on August 29, 2012 at 20:57 Permalink

    Fucking great man!

    Reply
  60. ink
    Posted on August 28, 2012 at 21:52 Permalink

    Thanks for great script!
    I found an issue.
    It appears in last Firefox and Opera, not Chrome.
    If I use @font-face (Century Gothic in .ttf format actually, I think others too) in scroll area and move scrollbar to the bottom position (or scroll with mouse wheel to the end) there is still some text that not displayed because it below visible area.
    But I found some kind of workaround. This would be simplier with ‘onInit’ or ‘onLoad’ callback.

    updated = false; $(".scroll").mCustomScrollbar({ callbacks:{ onScroll:function(){ if (!updated) { // run this only once $(".scroll").mCustomScrollbar("update"); // after this all text becomes visible when scrollbar at bottom position updated = true; } } } });

    Reply
    • malihu
      Posted on August 28, 2012 at 23:44 Permalink

      Hello,

      On the demos I use custom fonts without any issues so I can’t really say what could be wrong. Sounds like fonts are not fully loaded when plugin initiates. Do you call mCustomScrollbar on window load or document ready? To make sure fonts are loaded, you must call the plugin on window load.

      Reply
  61. Sara
    Posted on August 28, 2012 at 21:40 Permalink

    has anyone used this plugin in WordPress? I have it working nicely on a static html page, but I can’t seem to get it to initialize on wp. Any suggestions?

    Reply
    • Sara
      Posted on August 28, 2012 at 22:21 Permalink

      Never mind! I got it to work…

      Reply
  62. Arumugam
    Posted on August 28, 2012 at 20:51 Permalink

    Hi ,

    Thanks for wonderful library. i downloaded your library and try to change scroll buttons to my customized image like this in CSS file
    .mCSB_scrollTools .mCSB_buttonUp{
    background-image:url(../images/up_arrow_on_scroll.gif);

    }
    .mCSB_scrollTools .mCSB_buttonDown{
    background-image:url(../images/down_arrow_on_scroll.gif);
    }

    The problem i am facing is, the “click” event is not fired for button scrolling functionality, but “mousedown” and “mouseup” events fires as continuous scrolling.
    Any idea on this problem will be of great help. I am trying with opera8 , opera9 and also in firefox 8.0 all these version this functionality is not working.

    Thanks,
    Arumugam

    Reply
  63. Bruno
    Posted on August 28, 2012 at 17:26 Permalink

    Hi,

    I have a problem with IE 9… when i open a modal with custom scroll always breaks the modal on top…and i need scroll down to back the frist field.
    How can i disable the scroll to last field i “clicked” or something about it?

    Thanks

    Reply
  64. Ricardo
    Posted on August 28, 2012 at 11:41 Permalink

    Hey!

    Cool plugin! After some hours I did it work on a WordPress site I’m working on. The thing is that I want to use it on a horizontal scroll with dynamic content (something like the content_6 example) But when I swap the divs the size of the container doesn’t change. It only changes if I add both
    advanced:{ autoExpandHorizontalScroll:true, updateOnContentResize:true }
    but then the content layer blinks. If I only use one of them it doesn’t work. This is what I have so far:
    jQuery(document).ready(function($){ $(window).load(function(){ $("#scroller1").mCustomScrollbar({ horizontalScroll:true, advanced:{ autoExpandHorizontalScroll:true, updateOnContentResize:true } }); $("#scroller1 a[rel='scrollto-left']").click(function(e){ e.preventDefault(); $("#scroller1").mCustomScrollbar("scrollTo","left"); }); }); })(jQuery);
    Thank you in advance

    Reply
    • Ricardo
      Posted on August 28, 2012 at 12:34 Permalink

      I suppose I have to add the update method but I can’t make it work:

      jQuery(document).ready(function($){ jQuery(window).load(function(){ jQuery("#scroller1").mCustomScrollbar({ horizontalScroll:true, advanced:{ autoExpandHorizontalScroll:true } }); }); jQuery("#scroller1 a[rel='scrollto-left']").click(function(e){ e.preventDefault(); jQuery("#scroller1").mCustomScrollbar("scrollTo","left"); }); jQuery(window).load(function(){ jQuery("#scroller1").mCustomScrollbar("update"); }); });

      this is the script that swaps the divs in the container, do I have to implement it on the mCustomsScrollbar script?

      jQuery(document).ready(function($) { $("#toggle").click(function() { var div1 = $("#gallery-1"); if (div1.is(":hidden")) { div1.show(); $("#gallery-2").hide(); } else { div1.hide(); $("#gallery-2").show(); } return false; }); });

      thank you!

      Reply
      • malihu
        Posted on August 28, 2012 at 15:15 Permalink

        Hello,

        You can remove
        updateOnContentResize:true
        and the
        jQuery(window).load(function({ jQuery("#scroller1").mCustomScrollbar("update"); });
        and place the following inside the script that swap divs right before return false;:
        jQuery("#scroller1").mCustomScrollbar("update");

        Reply
        • Ricardo
          Posted on August 28, 2012 at 16:30 Permalink

          wow it worked like a charm!
          thank you!

          Reply
  65. Dave Burrows
    Posted on August 27, 2012 at 16:11 Permalink

    Hello,

    I’m so disappointed. I really wanted to use this scroll bar in a template I’ve been working on for weeks, but the website who is hosting my pages, eBay, doesn’t allow any javascripts. When I added the 4 lines, it showed me a red box saying: “Please provide the correct information in the highlighted fields. Description – Your listing cannot contain javascript (“.cookie”, “cookie(“, “replace(“, IFRAME, META, or includes), cookies or base href”.

    I was wondering; can you think of a way that these bits can be in an external document not unlike a CSS? If not that, maybe something else that might provide a good solution? As it is, if I extend the graphics in the body fully, the effect of the frame, image, and text box gliding in front of the rock face and cave painting is lost, and I want to keep it. The alternative I’m using right now seems awkward and it’s not at all customizable. I want for people to see it, and naturally move their mouse to it to explore. Something that wouldn’t look like a html hiccup as this one does would be more desirable.

    I hope you have a good idea, because I’m out of them. :-)

    Peace,

    Dave

    Reply
  66. Jirka Cerhan
    Posted on August 25, 2012 at 12:10 Permalink

    Hi,
    great plugin, a small donation on it’s way.
    It works just perfect, even with responsive web (skeleton for wordpress).

    I am just wondering why there is no option to adjust the scroll-wheel speed.

    I have found it in the source but other people might not be able to. It’s mousewheelVel (“t” in min. version) variable, I’m not sure what to do with safari, I have just multiplied it with the same number (not tested yet).

    Reply
    • malihu
      Posted on August 25, 2012 at 14:08 Permalink

      Hi,

      Thanks a lot for your donation :)
      You can change the mouse-wheel speed via the option parameter mouseWheel. Default value is auto but you can also set your own value (integer). See Configuration for more info.

      Reply
      • Jirka Cerhan
        Posted on August 25, 2012 at 14:38 Permalink

        Thanks,
        I have tested jScrollPane before, but this is hundred times better.

        Reply
  67. deepak
    Posted on August 25, 2012 at 00:33 Permalink

    hi malihu,
    please help me out its urgent have a submission on 26th evening

    when the page loads the script below runs

    $.post(“time.php”,{ count :counter },function(result){
    $(“#contentbox”).html(result);
    $(“#contentbox”).mCustomScrollbar({
    callbacks:{

    onScroll:function(){
    $(“#blackbox2″).hide();
    },
    onTotalScroll:function(){

    //alert(‘u scrolled’);
    $(“#blackbox2″).show();

    },

    }
    });

    });//post ends here

    //the above code successfully gives a scrollbar

    but after an adding content to the the update s not working

    the script that runs is(it runs on a button click)

    $.post(“time.php”,{ count :counter },function(result){
    $(“#contentbox”).append(result);

    $(“#contentbox”).ajaxComplete(function(){
    alert(‘ap’);
    $(“#contentbox”).mCustomScrollbar(“update”);
    });

    });

    noe this doesn’t update my scrollbar..
    pls help

    the html for check box is

    and css is given below

    #contentbox
    {
    margin-left:auto;
    margin-right:auto;
    width:820px;
    height:425px;

    }

    Reply
    • malihu
      Posted on August 25, 2012 at 14:42 Permalink

      Hi,

      It’s something to do with your ajax request.
      I think it’s better to use ajaxSuccess() instead of ajaxComplete() (see here).

      This said, I would probably remove ajaxComplete() and call the update method on data:
      $.post("time.php",{ count :counter },function(data){ $("#contentbox").append(data); alert('ap'); $("#contentbox").mCustomScrollbar("update"); });

      Reply
      • deepak
        Posted on August 27, 2012 at 19:06 Permalink

        still not working…

        any css restrictions.. or any other restrictions that are stopping the update?

        Reply
        • deepak
          Posted on August 27, 2012 at 19:14 Permalink

          and also the content getting appended to #contentbox are multiple divs

          Reply
          • deepak
            Posted on August 27, 2012 at 19:17 Permalink

            i would like to mail u the files..i would be very greatful to u if the work is done..thats the only thing im left out with..

  68. Arne
    Posted on August 24, 2012 at 11:20 Permalink

    Thanks for this great plugin! Awesome work!

    Reply
  69. amol
    Posted on August 24, 2012 at 08:36 Permalink

    Dear Team,

    I want above mention scroll bar to be spread by % wise. I can change the width and height in % as well as this scroll bar will be keyboard nevigation enable.

    Kindly help me for the same.

    Reply
  70. amol
    Posted on August 24, 2012 at 08:14 Permalink

    How to enable keyboard nevigation in this custom scroll bar? (Keyboard up & down arrow)

    Reply
  71. verism
    Posted on August 23, 2012 at 16:41 Permalink

    Firstly, thanks for sharing this plugin and continuing to answer questions.

    I’ve added it to my site-in-progress and almost got it working… When I disable the plugin, scroll-bars appear as intended and everything works fine – then with the plugin enabled, it appears in the correct place and ‘looks’ fine, but I can’t actually scroll; mousewheel and dragging does absolutely nothing.

    The content is initially hidden with css and jquery, and then fades in on an event, but I’ve followed your ajax update to the letter.

    Any ideas?

    Reply
    • malihu
      Posted on August 24, 2012 at 14:47 Permalink

      Hi,

      Make sure you call the update method after your content is fully loaded (via ajax) and is fully visible.

      If you use a fade-in animation with some duration, you need to update the srollbar after the animation completes (as a callback to your fadeIn() function). Please check section “Hiding & showing content blocks with custom scrollbars” for info and examples.

      Reply
      • verism
        Posted on August 24, 2012 at 21:25 Permalink

        Thanks for the reply, however that’s exactly what I’ve been doing – calling it within a .fadein() callback. I’m wondering if maybe there’s a conflict somewhere.

        Also, I get this message in Chrome’s console: Uncaught TypeError: Object [object Object] has no method ‘draggable’ which I guess will possibly have something to do with it.

        jQuery is such a headache sometimes…

        Reply
  72. Sevy
    Posted on August 23, 2012 at 16:27 Permalink

    great work!
    could be nice to include step event (jquery animate function)
    .
    .
    .
    mCSB_container.stop().animate({
    left: “-=”+posX
    }, {
    duration:$this.data(“scrollInertia”),
    easing:$this.data(“scrollEasing”),
    complete:function(){
    if(!updated){
    $this.mCustomScrollbar(“callbacks”,mCustomScrollBox,mCSB_container); /*user custom callback functions*/
    }
    },
    step:function() {

    //callback stuff …….

    }
    });

    Reply
  73. KEVIN
    Posted on August 23, 2012 at 00:27 Permalink

    With arrows for TABS

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

    $(“#content”).mCustomScrollbar({
    advanced:{updateOnContentResize: Boolean},
    scrollButtons:{
    enable:true
    }
    });
    });
    })(jQuery);

    Reply
  74. kevin
    Posted on August 23, 2012 at 00:17 Permalink

    This one work well for tabs hide and show, but i lost arrows in my scrollbar presentation

    $(“#content”).mCustomScrollbar({
    advanced:{
    updateOnContentResize: Boolean

    Reply
  75. Kévin
    Posted on August 23, 2012 at 00:09 Permalink

    Hello, i m trying to make this scroll in a Tabs, i can’t do it.
    Someone got the solution for this problem.

    When I put the script in the first Tabs that’s work well. But not for others.
    I think it s this Javascript. Someone can help me please.

    (function($){
    $(window).load(function(){
    $(“#content”).mCustomScrollbar({
    scrollButtons:{
    enable:true
    }
    });
    });
    })(jQuery);

    Reply
    • malihu
      Posted on August 24, 2012 at 16:27 Permalink

      Hi,

      You need to call the update method of the plugin each time you switch between tabs (either by show/hide or loading content via ajax). See sections Loading & updating content dynamically and Hiding & showing content blocks with custom scrollbars for more info.

      Reply
  76. RJTON
    Posted on August 22, 2012 at 23:52 Permalink

    Nice plugin i will put into my web
    thx!

    Reply
  77. bridal lehenga
    Posted on August 22, 2012 at 15:30 Permalink

    too good plugin cannot find a better on for sure

    Reply
  78. Chetan Vengurlekar@Best SEO in Mumbai
    Posted on August 21, 2012 at 12:52 Permalink

    Awesome post. My client’s website needed a fancy scroll bar and this is perfect scroll bar! Thanks. :)

    Reply
  79. LP Web Design Blog
    Posted on August 21, 2012 at 09:45 Permalink

    Thanks for this great content. This scroller is just what I was looking for in my next project.

    Regards
    LP Web Design Blog

    Reply
  80. Yogesh
    Posted on August 21, 2012 at 08:38 Permalink

    Hi,

    the scrollbars are awesome. but cant get it to work in tabs.
    i am using tabs structure in my web page and have included the scrollbar in every tab content. but it works in one and does not show up in other.
    Multiple scrollbars does works fine in the same webpage..
    bt it doesnt show up for me when i switched the tab..

    wht can be the solution / any workaround?
    pls help

    Reply
    • malihu
      Posted on August 21, 2012 at 15:26 Permalink

      Hi,

      Depending on how you switch between tabs (hide/show divs, loading tab content via ajax etc.), you’ll need to call the update method of the plugin after your tab is fully visible and/or tab content is fully loaded. Please check sections Plugin methods: update, as well as Loading & updating content dynamically and Hiding & showing content blocks with custom scrollbars for more info and examples.

      Reply
  81. Jay
    Posted on August 21, 2012 at 05:59 Permalink

    Never mind. I solved the problem by changing the div’s overflow from auto to hidden. I guess it is at the expense of those who do not have javascript enabled. Anyways, thank you for the great plugin.

    Jay

    Reply
    • malihu
      Posted on August 21, 2012 at 15:34 Permalink

      Yes that’s the quickest way of avoiding the native scrollbar showing before the plugin initiates. If you still want to support no javascript sessions, you could add a noscript tag with an overflow:auto CSS rule. For example:

      <noscript> <style> .content{overflow:auto;} </style> </noscript>

      Reply
  82. Jay
    Posted on August 21, 2012 at 02:58 Permalink

    hi malihu,
    first of all, thank you for such a great plugin.

    I noticed that just when a page containing this scroller loads, the default scrollbar appears for 0.2 seconds before changing to the custom content scroller. Is there any way to “preload” the scroller so that the default scrollbar does not appear?

    Much thanks,
    Jay

    Reply
  83. L. Berry
    Posted on August 20, 2012 at 18:47 Permalink

    malihu,

    I am very impressed by your custom content scroller, and thank you for being so willing to share your work so openly.

    Two questions:

    1.) Can I have nested scrollbars? That is, a custom content scroller inside of yet another custom content scroller? I have a situation where I need nested scrolling divs. There is a content div that scrolls, and individual section divs that also need to scroll independently of the parent div.

    2.) Also, is there a novel way to to disable and re-enable a custom content scroller? I just need for the aforementioned parent div to disable scrolling when another div inside it is expanded for viewing.

    I am in the planning stages and all I have at this time is a wireframe and no code implementation. I am trying to find the best solution for my particular circumstance, and hopefully your custom content scroller would provide me with a viable solution. Please advise.

    Thank You and Kindest Regards.

    Reply
    • malihu
      Posted on August 21, 2012 at 15:40 Permalink

      Hello,

      The plugin does not support nested scrollbars and I can’t really tell if I’ll implement such feature. I also don’t have a destroy method implemented, although I’ll probably add one within the coming weeks. At the moment the scrollbar is auto-disabled if its content is short enough to not need scrolling. Thanks!

      Reply
  84. jack li
    Posted on August 20, 2012 at 14:09 Permalink

    i’m sorry, another question! why do i set the property ‘horizontalScroll’ to true ,then the horizontal scollbar disappeared,i wanna both show.

    Reply
    • malihu
      Posted on August 21, 2012 at 15:47 Permalink

      The plugin does not support custom scrollbars for both axis. You can either have vertical or horizontal scrollbar on a single element.

      If your horizontal custom scrollbar does not appear, your content is probably not expanded horizontally. You should create your markup just as you would if you wanted to have a browser’s native horizontal scrollbar. The demo contain such scrollbars so you can view the source and see its html markup.

      Reply
  85. jack li
    Posted on August 20, 2012 at 13:53 Permalink

    i want to show the horizontal scollbar and the vertical scollbar at the same time, how do i do ? please help me! thank you!

    Reply
  86. Henrique Palazzo
    Posted on August 18, 2012 at 00:05 Permalink

    Great plugin! It works fine for me. Thanks!

    Reply
  87. Chris
    Posted on August 17, 2012 at 18:55 Permalink

    Hi, I’m very sorry to trouble you again, but I wonder whether you may be able to help please.

    I’m trying to add the ‘jQuery Scoller’ to a div which is used as a ‘sidebar’ for a Google Map Application. The entries displayed in the sidebar are HTML links to the map markers and are displayed and removed via the user selection of ‘checkboxes.

    The problem I’m having is that, although the height of the div is correct to the settings made in my file, I can not incorporate the styling of the ‘jQuery Scroller’. I know that the correct files are included in my HTML page, because as soon as I enter hard coded text or RSS feeds into the same dive, they work fine.

    I’ve tried all sorts of permutations of the files, using the examples as guides, but I just can’t seem to work this out.

    I’ve added the code I’m using below, and I just wondered whether you could possibly take a look at this and let me know where I’m going wrong.

    JavaScript

    <script> (function($){ $(window).load(function(){ $("#sidebar").mCustomScrollbar({ scrollButtons:{ enable:true } }); //ajax demo fn $("a[rel='load-content']").click(function(e){ e.preventDefault(); var $this=$(this), url=$this.attr("href"); $.get(url,function(data){ $("#sidebar.mCSB_container").html(data); //load new content inside .mCSB_container $("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly loaded content $("#sidebar").mCustomScrollbar("scrollTo","top"); //scroll to top }); }); $("a[rel='append-content']").click(function(e){ e.preventDefault(); var $this=$(this), url=$this.attr("href"); $.get(url,function(data){ $("#sidebar .mCSB_container").append(data); //append new content inside .mCSB_container $("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly appended content }); }); }); })(jQuery); </script> <strong>Styling</strong> <code> .content{height:150px; overflow:auto;}

    Div

    <div id="sidebar" class="content"></div>

    Any help would be greatly appreciated.

    Many thanks and kind regards

    Chris

    Reply
    • malihu
      Posted on August 18, 2012 at 14:52 Permalink

      Hi Chris,

      On the code you posted, the only thing I can see is that you need to add a space between #sidebar and .mCSB_container on the html() function.
      Change line:
      $("#sidebar.mCSB_container").html(data);
      to:
      $("#sidebar. mCSB_container").html(data);

      Reply
      • Chris
        Posted on August 18, 2012 at 16:50 Permalink

        Hi malihu, thank you very much for coming back to me on this so quickly.

        I’ve been through my code again making sure that there are no erroneous spaces etc, but I just can’t seem to get this to work.

        I’m the first to admit, I’m not very well versed in JavaScript, and I am conscious that there are other which may need your help, but I’m at a loss about what to do next.

        This is a link to my site http://www.mapmyfinds.co.uk and I have added the my code below which creates the ‘sidebar’ entry. To use this, please scroll to the bottom of the page and select all the check boxes by the map, and this will highlight the problem I have.

        I just wondered whether you could possibly cast an expert eye over this please, just to see if there is anything you think may be causing the conflict.

        Many thanks and kind regards

        Chris

        Reply
    • blacksword
      Posted on October 1, 2012 at 01:10 Permalink

      Hello,
      congratulation for your work. I have a question. I don’t know what is the reason, but when add a div scrollable in other div scrollbable, the parent doesn’t result scrollable even if the scrollbar appeare. Thank your for your reply.

      Reply
      • malihu
        Posted on October 1, 2012 at 15:24 Permalink

        Hello,
        At the moment, the plugin does not support nested custom scrollbars.

        Reply
  88. Anthony Russo
    Posted on August 16, 2012 at 22:23 Permalink

    Is there a way to place the scrollbar on the outside of my div like a normal scrollbar?

    Reply
    • malihu
      Posted on August 17, 2012 at 14:55 Permalink

      Not really, as the plugin cannot possibly know where your div resides within your markup.

      You can make your div wider to include your content (which is inside .mCSB_container), the scrollbar width, margins etc. Everything is done via the CSS file. For help, check the “Styling the scrollbars” section which contains a visual layout image of the markup.

      Reply
  89. Luis
    Posted on August 16, 2012 at 21:25 Permalink

    Hi, is possible to show the scrollbar on smartphones/tablets? BTW, in the Playbook works great.

    Reply
    • malihu
      Posted on August 17, 2012 at 15:00 Permalink

      On smartphones and tablets the plugin uses the native scrollbar of the device, as it creates a normal overflow:auto div. On an iPad for example, the iOS default scrollbar is displayed.

      Reply
  90. Luis
    Posted on August 16, 2012 at 21:23 Permalink

    Hi, nice work here, thank you.

    In Galaxy SIII is not working, the entire content is dragged, not being able to see the content below the overflow.

    Reply
    • malihu
      Posted on August 17, 2012 at 15:04 Permalink

      Hi Luis,

      This is weird… I’ve tested the demos on a brand new Galaxy S3 (Android 4) with its native Chrome browser and Firefox mobile and it worked great. Did you use another mobile browser?

      Reply
  91. Ari
    Posted on August 16, 2012 at 20:13 Permalink

    This is so great. Is this possible to be added in a textarea?

    Reply
    • malihu
      Posted on August 17, 2012 at 15:14 Permalink

      Nope. Cannot create the additional divs required inside a textarea input. You might be able to simulate a custom scrollbar for a textarea with an outer container and some additional javascript. I might create such demo when I get some some time.

      EDIT: ok, I made one ;) Check it here:
      http://manos.malihu.gr/tuts/custom-scrollbar-plugin/textarea_example.html

      Reply
      • Ari
        Posted on October 16, 2012 at 23:57 Permalink

        Ahh thanks!
        Although there is a bit jerky movement when the textarea gains focus.
        Have you thought of using a contenteditable workaround? (Like textareas being replaced with contenteditable and the scrollbar applied to them)

        Reply
        • malihu
          Posted on October 17, 2012 at 01:25 Permalink

          Yes, I believe you can definitely use the html5 contenteditable attribute to create a better simulated textarea.

          I just made a quick example on an actual textarea as I don’t know if every user can use or code their forms with non-form elements.

          It’s a great idea though, so thanks for the feedback :)

          Reply
  92. scythargon
    Posted on August 16, 2012 at 14:02 Permalink

    Thanks a lot for that. Answer me please – where is the page that’s screenshot is a topic-image of this thread? I mean – how can I open this page – http://manos.malihu.gr/wp-content/uploads/2012/07/jQuery-custom-content-scroller-v2-fm.png – it looks awesome too:)

    Reply
  93. Anthony Russo
    Posted on August 16, 2012 at 07:02 Permalink

    I am having an issue with using the css style “max-height and overflow:auto” together for my div. If I use these together this scrollbar will not show up at all. Is there a fix for this? Any help would be appreciated as I am very new to these things. Thanks ahead of time.

    Reply
    • malihu
      Posted on August 16, 2012 at 15:28 Permalink

      Hi,

      The plugin currently requires a height value to function correctly, but you can achieve what you need with a couple of extra lines in your script.

      You can programmatically get your div’s max-height value and set it as your div’s height. For example:

      $(window).load(function(){ var YourMaxHeightDiv=$("#content_1"); YourMaxHeightDiv.mCustomScrollbar().css({"height":YourMaxHeightDiv.css("max-height")}).mCustomScrollbar("update"); });

      The code might look a bit confusing cause we “chain” all functions in a single line, but it’s actually very simple.
      We firstly declare our max-height div (YourMaxHeightDiv) and then we use it to a)call the plugin function, b)set its height by its max-height value and c)call the update method of the plugin.

      Also, each time you add, remove content from your div or change its dimensions, you will need to call the update method:

      YourMaxHeightDiv.mCustomScrollbar("update");

      Hope this helps

      Reply
      • Anthony Russo
        Posted on August 16, 2012 at 18:02 Permalink

        So should it look like this?
        !window.jQuery &amp;&amp; document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E')) !window.jQuery.ui &amp;&amp; document.write(unescape('%3Cscript src="jquery/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E')) <!-- mousewheel plugin --> <!-- custom scrollbars plugin --> (function($){ $(window).load(function(){ var YourMaxHeightDiv=$(".content"); YourMaxHeightDiv.mCustomScrollbar().css({"600":YourMaxHeightDiv.css("600")}).mCustomScrollbar("update"); }); })(jQuery);

        I am guessing not because it is not working. I apologize I am not the greatest at jQuery yet.

        Reply
        • malihu
          Posted on August 16, 2012 at 20:21 Permalink

          No. You insert the code I provided exactly as it is and just change the #content_1 selector to your div.

          For example, if your div has class .content and you’ve set in your CSS a max-height for it, the complete code would be:

          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script>!window.jQuery && document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script>!window.jQuery.ui && document.write(unescape('%3Cscript src="jquery/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E'))</script> <script src="jquery.mousewheel.min.js"></script> <script src="jquery.mCustomScrollbar.js"></script> <script> (function($){ $(window).load(function(){ var YourMaxHeightDiv=$(".content"); YourMaxHeightDiv.mCustomScrollbar().css({"height":YourMaxHeightDiv.css("max-height")}).mCustomScrollbar("update");}); })(jQuery); </script>

          Reply
          • Anthony Russo
            Posted on August 16, 2012 at 21:36 Permalink

            Ok I understand now. Thank you for your help.

  94. Federico
    Posted on August 15, 2012 at 20:35 Permalink

    Manos, just a question about scrollbar style. In my page http://gavs.it/rci_dev_scroll.php the scrollbar looks not styled like in the example of the following page: http://gavs.it/rci_test.php. Both pages share your css and file but the scrollbar looks quite odd, not rounded border or style.
    Thanks for any help.

    Reply
    • malihu
      Posted on August 16, 2012 at 15:45 Permalink

      You need to change the styling (colors, buttons images etc.) of the scrollbar within the CSS according to your white background (my demo has light colored scrollbar on dark background).

      I’ve also included light and dark colored versions of arrows images in the mCSB_buttons.png, so you don’t have to create them on your own (that is if you do use the arrow buttons).

      On the demo the 5th example (.content_5) has dark colored scrollbar so you can check its css rules in jquery.mCustomScrollbar.css and apply them to your styling ;)

      Reply
  95. SinsiaCuclic@gmail.com
    Posted on August 15, 2012 at 17:14 Permalink

    Hello. you have a major bug in your code.

    In our dynamically scalled site the verticall scroller breaks. The last entry of the list jumps to the nexst row becouse he automatically set width of the div “div#mCSB_1.mCustomScrollBox div.mCSB_container” gets some pixels to short. only solution for us was that we increase its width after he instances for about 40 pixels.

    Reply
    • SinsiaCuclic@gmail.com
      Posted on August 15, 2012 at 17:16 Permalink

      ps. forgot to mention what couses this bug. it is coused when the elements in the div. is somthing else then letters.

      Even spaces  , +,- etc breaks it…. nutss….

      Reply
      • malihu
        Posted on August 15, 2012 at 17:19 Permalink

        Hello,

        Can you provide a link or a description on how to replicate this bug? Thanks.

        Reply
  96. Federico
    Posted on August 15, 2012 at 12:45 Permalink

    Sorry, I need to ask some help. I’ve applied all needed libraries and followed the example, but the custom scrollbar seems not applied to my box :( . You can see it at this page: http://gavs.it/rci_dev_scroll.php
    The box is the area on the right column with title “RCI latest updates”, right now it includes a long list of dates into an unordered list.
    Thanks for any help

    Reply
    • malihu
      Posted on August 15, 2012 at 15:05 Permalink

      I think you need to give your .content_8 div a height value, otherwise the div expands to fully display its content, so the plugin assumes no scrollbar is needed (just like the browser does with its native scrollbar on divs with overflow: auto).

      Reply
      • Federico
        Posted on August 15, 2012 at 18:31 Permalink

        Hi Manos, thanks a lot for your feedback and help. Your great work deserve a donation (sent right now). Thanks again

        Reply
        • malihu
          Posted on August 16, 2012 at 14:09 Permalink

          Thanks a ton Federico :)

          Reply
  97. Federico
    Posted on August 15, 2012 at 11:44 Permalink

    Hi Malihu, great script! Just wondering if scrolling a div at the bottom of its own area the script could load more content using AJAX and PHP server script.
    In your AJAX example I can load more content using a link on the div, could be done automatically as I wrote above? In my site I have a box on the right side of a main page, the box show latest additions into a database, ordered by date; would be useful to scroll that box and see older updates loaded dinamically.
    Thanks for reply

    Reply
  98. Robert
    Posted on August 14, 2012 at 23:43 Permalink

    Why does the scroller look broken in IE7

    Reply
    • malihu
      Posted on August 15, 2012 at 15:31 Permalink

      Its just the styling of the scrollbar that is probably too advanced for IE7… Scrollbar functions correctly, so you could just add some CSS hacks and prefixes to provide support for old IE versions.

      Reply
  99. Hernán
    Posted on August 14, 2012 at 19:29 Permalink

    HI! First of all I want to congratulate you and thank to you, because it’s a great Script and the instructions are very easily to follow.

    However, I want to make the following question and may be you can help me.

    I’m working with this example:
    http://manos.malihu.gr/tuts/custom-scrollbar-plugin/ajax_example.html

    The first link for downloading a new content works perfectly.

    But when from this HTML, that I previously loaded (demo_files/ajax_content.html), I want to load a new content, it doesn’t load it in the same scroll, but in a new webpage.

    My idea is to load new contents from the same html that I’ve loaded before.

    Any suggestion how I can solve this problem?

    Thank you!

    Reply
    • malihu
      Posted on August 15, 2012 at 15:40 Permalink

      Hello,

      This probably happens because the click event does not bind to your newly added link. This is normal as the new link was not in the DOM when the click function was declared. I think you should use something like jQuery’s .live() event handler which binds events on current and future elements.

      See here for more info and usage:
      http://api.jquery.com/live/

      Reply
  100. iMan
    Posted on August 14, 2012 at 14:20 Permalink

    Hello,

    I have a problem in IE7 and IE8. I have the scrollbar on tag in display block and the problem is that when I scroll down to items with link which are hidden in the scroll and trying to click on them I just got scrolled up to the top and the href link doesn´t work. It only happens in IE7 and IE8.

    Anyone can hepl?

    Thanks

    Reply
    • iMan
      Posted on August 14, 2012 at 14:23 Permalink

      code update:
      scrollbar on <ul> tag in display block
      click on <li><a> tag doesn´t work

      Reply
    • iMan
      Posted on August 15, 2012 at 15:06 Permalink

      got it .. just comment out /*scrolling on element focus (e.g. via TAB key)*/

      Reply
      • malihu
        Posted on August 15, 2012 at 15:20 Permalink

        Do you have anchor links or input buttons that produce this issue when clicked? If you want, please make sure you have the very latest plugin version as it only focuses links that have “tabindex” attribute.

        Reply

Comments pages: 1 4 5 6 7 8 16


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>

css.php