web design

jQuery custom content scroller

jQuery custom content scroller

Custom scrollbar plugin that’s fully customizable with CSS. Features vertical/horizontal scrolling, mouse-wheel support (via jQuery mousewheel plugin), scrolling buttons, scroll inertia with easing, auto-adjustable scrollbar length, nested scrollbars, scroll-to functionality, user defined callbacks and much more.

Current version 2.8.3 (Changelog)

How to use it

Download the archive which contains all plugin files and examples. Extract and upload jquery.mCustomScrollbar.concat.min.js, jquery.mCustomScrollbar.css and mCSB_buttons.png to your web server.

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

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

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

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

After files inclusion, call mCustomScrollbar function on the element you want to add custom scrollbars. The example below adds scrollbars to elements with class name content

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

Your .content element(s) (or any other element you’re attaching the custom scrollbar) should have a typical styling of an overflowed block, e.g. a height (or max-height) value, overflow: auto (or hidden) and its content should be long enough to require a scrollbar.

To add a horizontal scrollbar, style your element accordingly (give it a width value and a wide enough content) and set the horizontalScroll option parameter of mCustomScrollbar to true

$(".content").mCustomScrollbar({
    horizontalScroll:true
});

jquery.mCustomScrollbar.css contains few ready-to-use scrollbar themes that you can apply easily on your scrollbars by setting the theme option parameter to the theme name you want

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

Detailed usage guide

jquery.mCustomScrollbar.css contains the basic styling of the custom scrollbar and 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 is a single PNG image file that contains the default, plus some additional sets for the up, down, left and right arrows used by the scrollbar buttons. I’ve created a single file in order to use CSS sprites for the button icons (defined in jquery.mCustomScrollbar.css). The plugin archive contains the PSD source (source_files/mCSB_buttons.psd) so you can add your own if you wish.

jquery.mCustomScrollbar.concat.min.js is the main plugin file which contains the custom scrollbar script as well as all necessary scripts, plugins etc. concatenated and minified. This file should be included after loading the jQuery library (the javascript library used by the plugin).

Both jQuery and plugin files can be included inside the head or body tags of your document. Including scripts at the bottom of html documents (e.g. just before the closing body tag) is usually recommended for better performance. You can load jQuery via Google’s CDN (why?) or from your own directory (the archive contains a copy of jQuery inside js folder).

The way I recommend and what I’ve used in all demos and examples is loading jQuery from a CDN (e.g. Google) and have a local copy to fallback in case CDN files won’t load

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>

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.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</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, ensuring the script calculates correctly content’s length.
If the scrollbars apply to content that has no elements with external sources (e.g. images, objects etc.) you may want to call mCustomScrollbar on document ready (so 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 have different options (configuration and option parameters explained below) for each selector

<script>
  (function($){
    $(window).load(function(){
      $("#content-1").mCustomScrollbar({
        horizontalScroll:true,
        autoDraggerLength:false
      });
      $("#content-2").mCustomScrollbar({
        mouseWheel:false,
        scrollButtons:{
          enable:true
        }
      });
    });
  })(jQuery);
</script>

Important notes

In order for the custom scrollbar to work correctly, your content block must be visible (i.e. should not have display:none) and its content should be fully loaded. Otherwise you must call plugin’s update method after the above conditions are met.

Hidden content blocks (either by CSS display property or jQuery $.hide()) have zero dimensions, so calling mCustomScrollbar function on them will not work. Instead, you should call the function after your elements become fully visible, so the script calculates content length correctly and apply/update the scrollbar (see live example).

If you load your content dynamically (e.g. via ajax) you must also call mCustomScrollbar function (or its update method) after content is fully loaded (e.g. on ajax success). The same applies when you programmatically change the content of elements with custom scrollbars (see ajax demo).

If for any reason you cannot insert your own code in other scripts or simply don’t know where to put it, set plugin’s updateOnContentResize option parameter to true

$(".content").mCustomScrollbar({
    advanced:{
        updateOnContentResize: true
    }
});

The above will call automatically the update method if your content’s length is changed.

Configuration

mCustomScrollbar function can get the following option parameters in order to customize scrollbar behavior and functionality

set_width: false
Set the width of your content (overwrites CSS width), value in pixels (integer) or percentage (string).
set_height: false
Set the height of your content (overwrites CSS height), value in pixels (integer) or percentage (string).
horizontalScroll: Boolean
Add horizontal scrollbar (default is vertical), values: true, false.
scrollInertia: Integer
Scrolling inertia (easing), value in milliseconds (0 for no scrolling inertia).
mouseWheel: Boolean
Mouse-wheel support, values: true, false.
mouseWheelPixels: "auto"
Mouse-wheel scrolling pixels amount, value in pixels (integer) or “auto” (script calculates and sets pixels amount according to content length).
autoDraggerLength: Boolean
Auto-adjust scrollbar height/width according to content, values: true, false.
autoHideScrollbar: Boolean
Automatically hide the scrollbar when idle or mouse is not over the content.
scrollButtons:{
    enable: Boolean
}
Scroll buttons support, values: true, false.
scrollButtons:{
    scrollType: String
}
Scroll buttons scroll type, values: "continuous" (scroll continuously while pressing the button), "pixels" (scroll by a fixed number of pixels on each click)
See both scroll types in action.
scrollButtons:{
    scrollSpeed: "auto"
}
Scroll buttons continuous scrolling speed, integer value or “auto” (script calculates and sets the speed according to content length).
scrollButtons:{
    scrollAmount: Integer
}
Scroll buttons pixels scrolling amount, value in pixels.
advanced:{
    updateOnBrowserResize: Boolean
}
Update scrollbars on browser resize (for fluid content blocks & layouts based on percentages), values: true, false. Set to false only when your content has fixed dimensions.
advanced:{
    updateOnContentResize: Boolean
}
Auto-update scrollbars on content resize (useful when adding/changing content programmatically), values: true, false
Setting this to true makes the script check for content length changes (every few milliseconds) and automatically call plugin’s update method to adjust the scrollbar accordingly.
advanced:{
    autoExpandHorizontalScroll: Boolean
}
Auto-expanding content’s width on horizontal scrollbars, values: true, false
Set to true if you have horizontal scrollbar on content that will change on-the-fly. Demo contains blocks with images and horizontal scrollbars that use this option parameter.
advanced:{
    autoScrollOnFocus: Boolean
}
Auto-scrolling on elements that have focus (e.g. scrollbar automatically scrolls-to form textfields when the TAB key is pressed), values: true, false.
advanced:{
    normalizeMouseWheelDelta: Boolean
}
Normalize mouse-wheel delta (-1/1), values: true, false.
contentTouchScroll: Boolean
Additional scrolling method by touch-swipe content (for touch enabled devices), values: true, false.
callbacks:{
    onScrollStart: function(){}
}
User defined callback function, triggered on scroll start event. You can call your own function(s) each time a scroll event begins (callbacks demo). Example:
callbacks:{
  onScrollStart:function(){
    console.log("scrolling started...");
  }
}
callbacks:{
    onScroll: function(){}
}
User defined callback function, triggered on scroll event. Call your own function(s) each time a scroll event completes (callbacks demo). Example:
callbacks:{
  onScroll:function(){
    console.log("content scrolled...");
  }
}
callbacks:{
    onTotalScroll: function(){}
}
User defined callback function, triggered when scroll end-limit is reached (callbacks demo). Example:
callbacks:{
  onTotalScroll:function(){
    console.log("scrolled to end of content.");
  }
}
callbacks:{
    onTotalScrollBack: function(){}
}
User defined callback function, triggered when scroll beginning is reached (callbacks demo). Example:
callbacks:{
  onTotalScrollBack:function(){
    console.log("scrolled back to the beginning of content.");
  }
}
callbacks:{
    onTotalScrollOffset: Integer
}
Scroll end-limit offset, value in pixels (see example).
callbacks:{
    onTotalScrollBackOffset: Integer
}
Scroll beginning offset, value in pixels.
callbacks:{
    whileScrolling: function(){}
}
User defined callback function, triggered while scrolling (callbacks demo). Example:
callbacks:{
  whileScrolling:function(){
    console.log("scrolling...");
  }
}
theme: String
Set a scrollbar ready-to-use theme (see all themes).

Scrollbar markup

The script generates all necessary markup for the javascript scrollbar

<div class="content mCustomScrollbar _mCS_1">
  <div class="mCustomScrollBox" id="mCSB_1">
    <div class="mCSB_container">
      <!-- content -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonUp"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger">
          <div class="mCSB_dragger_bar"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonDown"></a>
    </div>
  </div>
</div>

The original content resides inside .mCSB_container div which is also the scrollbale element. .mCSB_scrollTools contains the scrollbar and scrolling buttons. .mCSB_buttonUp and .mCSB_buttonDown are generated only in case you enable scroll buttons (see Configuration).

The markup for content blocks with horizontal scrollbars gets an additional mCSB_horizontal class and the scrolling buttons become .mCSB_buttonLeft and .mCSB_buttonRight respectively

<div class="content mCustomScrollbar _mCS_1">
  <div class="mCustomScrollBox mCSB_horizontal" id="mCSB_1">
    <div class="mCSB_container">
      <!-- content -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonLeft"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger">
          <div class="mCSB_dragger_bar"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonRight"></a>
    </div>
  </div>
</div>

Plugin methods

update

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

Calling plugin’s update method will update existing scrollbars (the script will re-calculate scrollbar length, scrolling amount etc. according to scrollable content).
You should call this method within your scripts each time you change your content dynamically (for example, when adding or removing elements with javascript, inserting new content via ajax, hiding/showing content blocks etc.).

Examples

Appending plain text content on blocks with custom scrollbars

$(".content .mCSB_container").append("<p>New content...</p>");
$(".content").mCustomScrollbar("update");

Appending an image on a block with custom scrollbars

$("#content-1 .myImagesContainer").append("<img src='myNewImage.jpg' />");
$("#content-1 .myImagesContainer img").load(function(){
  $("#content-1").mCustomScrollbar("update");
});

Animating the height of blocks with custom scrollbars

$(".content").animate({height:800},"slow",function(){
  $(this).mCustomScrollbar("update");
});

Always call the update method after newly added content is fully loaded and/or animations are completed.

scrollTo

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

Calling plugin’s scrollTo method will automatically scroll the content to the position parameter. Scroll-to position can be a string (e.g. "#element-id", "bottom", "left" etc.) or an integer, indicating a number of pixels to scroll-to.

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 (check the stylesheet inside demo_files that I’ve used to style the scrollbars for the demo and examples).

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:

._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 1st scrollbar dragger style... */
}
._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 2nd scrollbar dragger style... */
}
._mCS_3 .mCSB_scrollTools .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();
        }
    }
});

function myCustomFn(){
    console.log(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 current element as jQuery object
  • mcs.top – content’s top position (pixels)
  • mcs.left – content’s left position (pixels)
  • mcs.draggerTop – scrollbar dragger’s top position (pixels)
  • mcs.draggerLeft – scrollbar dragger’s left position (pixels)
  • mcs.topPct – content vertical scrolling percentage
  • mcs.leftPct – content horizontal scrolling percentage

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

You can see all callbacks in action on this demo

Plugin dependencies

Custom scrollbar plugin requires the following in order to work

Mousewheel plugin (by Brandon Aaron) adds cross-browser mouse-wheel support for the scrollbar.

The production-ready plugin file – jquery.mCustomScrollbar.concat.min.js contains the plugin script and mousewheel plugin, concatenated and minified.
jquery.mCustomScrollbar.js contains the plugin script (uncompressed) and loads dependencies (all except jQuery) via CDN.
All script files and dependencies are available separately (uncompressed and minified version included) inside js directory.

Loading scripts separately

If you prefer to load the plugin script and each dependency separately (example included in the archive), you can do the following

<!-- Google CDN jQuery with fallback to local -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- CloudFlare CDN mousewheel plugin with fallback to local -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
<script>$.event.special.mousewheel || document.write('<script src="js/minified/jquery.mousewheel.min.js"><\/script>')</script>
<!-- custom scrollbars plugin -->
<script src="js/minified/jquery.mCustomScrollbar.min.js"></script>

Each script loads via CDN and falls-back to local files in case CDN fails.

License

You are free to use, study, improve and modify this script wherever and however you like.
Creative Commons License All works are licensed under GNU General Public License, GNU Lesser General Public License or Creative Commons Attribution 3.0 Unported License.

Pages: 1 2


2,985 Comments

Post a comment

Comments pages: 1 13 14 15

  1. awe
    Posted on April 14, 2014 at 10:44 Permalink

    It seems that it does not work very good with CSS transformed elements (using TweenMax), perhaps you should take the container’s scale, rotate etc. into account when calculating the scroll amount?

    Reply
  2. CHA
    Posted on April 14, 2014 at 09:52 Permalink

    How can i do that the “jQuery custom content scroller” is working in Elements like “Highslide Thumbnail Viewer” ?

    I have Problems with “height” i think.

    Reply
  3. sevinc
    Posted on April 14, 2014 at 00:19 Permalink

    hi
    this is great really, but i have a problem,
    I found out that there is a problem when using it in a Div Tag that has a child Div tag with” position:absolute;”, the content will not appear, but when I set “position:relative” or other it works, how can I fix this problem?

    Reply
  4. scr
    Posted on April 14, 2014 at 00:11 Permalink

    hi,

    great work and works great :-)

    is there a way to scroll autom. to a par by onload the page? my scrollbar ist dynamically filled with php. every entry hat the id to scroll to.

    this is not working:

    <body onLoad="if (location.hash != '#books-’) location.hash = ‘#books-’;”

    thx
    greetz

    Reply
    • scr
      Posted on April 14, 2014 at 00:13 Permalink

      sorry:

      <body onLoad="if (location.hash != '#buecher-<?php the_ID(); ?>') location.hash = '#buecher-<?php the_ID(); ?>';"

      Reply
  5. LEEROY
    Posted on April 10, 2014 at 12:17 Permalink

    Hi,

    I am using the Horizontal scroll, and when I try to resize the browser window the pictures do not dynamically shrink, I have looked through the configuration options and changed the resize options to True, and again in the “jquery.mCustomScrollbar.concat.min”, but It doesnt change anything. Has anyone experienced anything similar or found a solution to this?

    Regards

    Reply
  6. Andrew
    Posted on April 9, 2014 at 20:26 Permalink

    Can anyone help? Plugin is great but I’m having some issues.

    I’m using horizontally as a content scroller and works apart from showing a disable browser scroller underneath in IE, firefox, and Chrome. This does not look great. Have I missed something?

    For chrome I know I can sort using CSS but there must be something I’ve missed… any ideas?

    This is my CSS if it helps:

    #nav {
    height: 800px;
    width:100%;
    overflow-x: scroll;
    overflow-y: hidden;
    }

    #nav img{
    display: inline-block;
    float:left;
    }

    #navprojects {
    width:4000px;
    height:750px;
    clear:left;
    display: inline-block;
    }

    I have followed steps above as instructed on ‘how to use it’.

    Thanks muchly.

    Andy

    Reply
    • Andrew
      Posted on April 9, 2014 at 20:36 Permalink

      OK, figured it out: forgot to remove ‘overflow-x:scroll’ on the style sheet.
      Never mind. Thanks a lot!!

      Reply
  7. Kahtoo
    Posted on April 8, 2014 at 23:43 Permalink

    hi,

    great plugin, but is there a way to disable the x-axis contentTouchScroll? i only need the vertical scroll, i need the swipe-touch event leftright for sliding between different slides (fullpage-website)

    thx

    Kahtoo

    Reply
  8. Özgür Gündüz
    Posted on April 8, 2014 at 13:42 Permalink

    I like it. I new find your blog and i love :) andd this post perfect ! Thanks

    Reply
  9. Jarolin Vargas
    Posted on April 6, 2014 at 00:07 Permalink

    Great plugin. Its working perfectly so far but i have one simple issue. When i reach the bottom of the scroll within my div, the scrolling switches to the body and the body begins to scroll when i reach the end. This is something that already happens on mac osx and its very annoying, but its also happening on windows with the plugin only when i use advanced options. How can i disable the scroll switching to the body when i reach the end of my div scroll?

    Reply
  10. David
    Posted on April 5, 2014 at 02:24 Permalink

    Hi,

    Great plugin indeed! I am trying to prevent scroll to propagate from a child div to its parent in the case of nested vertical scroll bars.

    I have tried to implement http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element both directly and through the whileScrolling callback function. The problem is that function doesn’t expose the event.

    How can I work around this? Is there a native way of disabling scroll propagation?

    Thanks

    Reply
  11. Christoph
    Posted on April 4, 2014 at 10:56 Permalink

    Hi Malihu,

    great plugin! I was wondering if you have any plans for the next version(s) to use CSS translate() instead of animating the position top and left. Translate runs a whole lot smoother especially on mobile devices. Also for IE11 Microsoft has changed the MSPointer events to just Pointer events but you probably know that already – it’d be great if you’d fix that as well.

    Best regards,

    Christoph

    Reply
  12. sarang
    Posted on March 31, 2014 at 16:44 Permalink

    How to use this plugin with jquery autocomplete, this is not working with the same. please let me know asap.

    Reply
  13. Dav
    Posted on March 26, 2014 at 11:12 Permalink

    Thanks for this cool plugin.

    I have a question regardinf the automatic lookup of the mousewheel plugin via CDN. Depending on vistor location and server settings, this can cause unnecessary slowdown of page load times. The code I refer to is this line in the plugin.

    $.event.special.mousewheel || document.write('<script src="'+_dlp+'//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"><\/script>');

    Although I understand the logic behind it and I know I could just delete the line, I was wondering if there is an option to switch this off (or is there a version available without it)?

    The reason for this is that my system updates via schedule git diff repos and this gets overwritten even if I have removed this line.

    Reply
  14. Edgar Vega
    Posted on March 25, 2014 at 19:39 Permalink

    Hi,

    I am having an issue with relative elements after ajax call. If I click any controlls inside the relative container, the scroll bar automatically scrolls ups. Do you know how can I fix it?

    Btw, great job.

    Regards

    Reply
    • Edgar Vega
      Posted on March 25, 2014 at 22:22 Permalink

      Well, I partially fixed it by setting the autoScrollOnFocus to false

      Reply
  15. HasanG
    Posted on March 22, 2014 at 17:24 Permalink

    Hi,

    I’m trying to use you plugin with lazy load. Can anybody help me with this or suggest compatible lazy loading plugin?

    http://stackoverflow.com/questions/15532362/jquery-custom-scrollbar-and-lazy-load

    Reply
  16. Koray
    Posted on March 21, 2014 at 11:03 Permalink

    Hi, greta job, thanks.

    I call mcustomscrollbar method in window.load and this causes a call to document ready event.

    Is this normal ? How can i prevent this.

    Reply
  17. Webina
    Posted on March 21, 2014 at 08:13 Permalink

    Hi,

    Thanks for the awesome plugin!

    Couple of questions:

    1) When is version3 expected to be released?
    2) To do custom download of JqueryUI, can you please give the specific dependencies that is required by this plugin. Easing, Draggable. Anything else?

    Thanks in advance

    Reply
  18. glen
    Posted on March 20, 2014 at 14:47 Permalink

    need some way to retrive the current position so that i could scroll back to same position on refresh

    Reply
  19. Munzir Madhadzir
    Posted on March 20, 2014 at 12:05 Permalink

    Hi,

    Great script!

    Appreciate if you can add scrolling shadow indicator on the next version.

    Reply
  20. Boopalan
    Posted on March 17, 2014 at 14:05 Permalink

    Great plugin! It would be great if both Horizontal and Vertical Scrollbar support on the same instance. Any enrichment on it?

    Reply
    • malihu
      Posted on March 22, 2014 at 18:57 Permalink

      This feature will be available on the next version (3.0) which I’m currently developing (will be released in a couple of weeks).

      Reply
      • Leo
        Posted on April 10, 2014 at 22:19 Permalink

        Excellent!! is the only reason why I cannot use this plugin!

        Reply
  21. Dan
    Posted on March 17, 2014 at 13:04 Permalink

    Hi guys,

    One of our sites uses the horizontal scroller. It works a treat it Chrome and FF, but in IE8, when you scroll past the first set of thumbnails, the rest never show. They are all loaded into the source and the draggable button and container stretch accordingly.

    http://david-ousey.agent.staging.homeflow.co.uk/properties/3654296/sales

    Any ideas? Is IE8 supported?

    Reply
  22. Makis
    Posted on March 12, 2014 at 18:47 Permalink

    Excellent plugin! Sygxaritiria!

    It would be great to have both horizontal and vertical scrolling avaialble for the same content (same DIV). Any plans to have this feature implemented?

    Reply
    • malihu
      Posted on March 25, 2014 at 22:37 Permalink

      Yeap. This will be available in version 3.0 which will be released in 1-2 weeks max.

      Reply
  23. Manu
    Posted on March 12, 2014 at 14:44 Permalink

    Hi malihu,
    i’ve an infinite scrollbar on my site and its working as expected . The only issue am facing is that the onTotalScroll callback function is not being invoked even if the scroller reaches the end, except when user stops scrolling mouse wheel. What i wanted is onTotalScroll callback should get invoked once the scroller reaches the end irrespective of whether the user is keep on scrolling or not. same for onTotalScrollBack as well
    Any help would be really appreciative

    Reply
  24. Glitch
    Posted on March 12, 2014 at 10:30 Permalink

    Love this plugin. I have used it in a Magento theme but there is one thing I’d like to see possible. In the default Magento theme you can navigate in a long list of products, view a product page, hit the back button and return on the same position in the product page where you clicked the product you just viewed. With this plugin the page is refreshed and you start at the top again. Would it be possible to implement this kind of history behaviour where clicking the back button returns you to the same scroll position where you left of.

    Reply
  25. VTwo Group
    Posted on March 11, 2014 at 14:08 Permalink

    The Great Work & Tasteful…
    Good luck.

    Reply
  26. mmdwc
    Posted on March 10, 2014 at 21:56 Permalink

    Hello,

    nice plugin, works fine !
    I’m using scrollbar on a page with images displayed in a Grid view, and when the scrollabr is active there’s an unwanted margin-bottom of 5px added … is it generated buy default ? Is there a way of skipping it ?
    thanks a lot for your help, I can’t find a solution to fix it

    M

    Reply
  27. Anton
    Posted on March 10, 2014 at 09:32 Permalink

    How can i do that the “jQuery custom content scroller” is working in Elements like “Highslide Thumbnail Viewer” ?

    Reply
    • Anton
      Posted on March 12, 2014 at 12:00 Permalink

      Hello again…

      The Scrollbars are wonderful in normal content DIVs… but when i will relaize the Scrollbars into a Wrapper like Highslide Thumbnail Viewer, the scrolling not works. I can see the Scroll Elements, but nothing works.

      I use this Code with a “document).ready” Funktion.

      (function($){
      $(document).ready(function(){
      $(“.hs_kate”).mCustomScrollbar({
      scrollButtons:{
      enable:true
      },
      theme:”light-thin”
      });
      });
      })(jQuery);

      I cant understand why it not works :(
      Anybody an idea?

      Reply
  28. vishal
    Posted on March 8, 2014 at 16:31 Permalink

    Great Work Man

    I am facing one issue, Could you please help me out with it. Custom scroll touch doesnt work for Windows Phones for rest mobile devices and browser it work fine.

    This the init code i am using:

    $(“.contact_scroll”).mCustomScrollbar(‘destroy’);
    $(“.contact_scroll”).mCustomScrollbar({
    scrollButtons:{enable:false},
    contentTouchScroll:true
    });

    Thanks in advance

    Reply
    • Marginy
      Posted on April 16, 2014 at 10:16 Permalink

      I’ve got the similar problem on Window Tablet PC. The content scrolls if I drag the scrollbar but not scrolling with swipe-touch. Could anyone help?
      P.S. Sorry for my pour English.

      Reply
  29. Templatemesh
    Posted on March 7, 2014 at 12:56 Permalink

    Thank you for the great work!!!

    Reply
  30. Narendar
    Posted on March 7, 2014 at 11:53 Permalink

    The plugin is really nice. but, it has some issue with tab key press.
    “autoScrollOnFocus” function is not working on tab key press. did you notice this?

    and one more, for the first time we click on scrollbar it is not scrolling..

    please fix the issue with “autoScrollOnFocus”. and Let us know.

    Reply
    • malihu
      Posted on March 11, 2014 at 17:45 Permalink

      The Tab key works as expected in all implementations. Does it work on the demo and examples for you?

      Reply
  31. Neil
    Posted on March 6, 2014 at 11:33 Permalink

    Hi,

    Great work – one thing I did notice though is that if you specify “mouseWheel:false” the plugin still downloads the jquery.mousewheel.min.js pluigin.

    Nothing major, but its an extra request being issued by the browser when its not needed.

    Cheers

    Reply
  32. KenjiPL
    Posted on March 5, 2014 at 09:56 Permalink

    Hi,

    First of all i thank you for nice plugin.

    But there is one flaw in the code. Please consider the event propagation model as event bubbling can be stoped at some point and it will never reach document. In result dragger can be never deselected as “mouseup” event is binded to document and not to the element that was clicked (or on any parent created by plugin). In modern browsers “mouseup” event should be usually fired (eg. firefox) on elements that was clicked but not necessary “hovered” after mouse button release.
    This is crucial when combined with other plugins that use “detached” content such as Select2 (i used it for nicer scrolls in dropdown list) and blocks bubbling.

    Reply
  33. stephen E
    Posted on March 1, 2014 at 12:41 Permalink

    Can this plug-in be used with adobe edge animate cc

    Reply
  34. Jeff Altman
    Posted on March 1, 2014 at 01:43 Permalink

    Hi Manos – Great plug-in. Please be aware that the link to “http://manos.malihu.gr/wp-content/uploads/2012/07/scrollbar_layout.png” is broken (404 error). Also, I am using a horizontal scroller and would like to make the scroll buttons twice as big (40px.40px) – how would I style that? I tried changing multiple .mCSB item (scroll tools, button left, etc.) in the .css file but have not seen any changes.

    Thanks for your help.

    Jeff

    Reply
    • Jeff Altman
      Posted on March 1, 2014 at 20:38 Permalink

      Link to graphic now working.

      Anyone on how to make left/right buttons width: 40px?

      Reply
  35. vidya
    Posted on February 28, 2014 at 14:34 Permalink

    How can I add keyboard event on scroller?

    Reply
  36. Prakhar
    Posted on February 28, 2014 at 08:33 Permalink

    can we use vertical and horizontal scroll on same div at time

    Reply
  37. sushil
    Posted on February 25, 2014 at 13:43 Permalink

    Its not working in accordions. can u plz have an example to add costume scroll bar in accordions.
    Thanks
    sushil
    +919968532406

    Reply
  38. Max
    Posted on February 25, 2014 at 11:51 Permalink

    Wonderful scrollbar but it is slow :(
    For desktop website increase speed with “mouseWheelPixels” but touch for mobile website on smartphone is always slow.
    How can I fix?

    Reply
    • malihu
      Posted on March 11, 2014 at 17:50 Permalink

      This will be fixed in version 3.0 I’m currently working on (will be released hopefully in a couple of weeks).

      Reply
  39. Bucur
    Posted on February 23, 2014 at 18:06 Permalink

    try to change the default scroll bar with new codes plugin and do not succeed, someone help me somehow, so far we have succeeded in content so …

    (‘html’) or (‘body’) no succes…

    (function(jQuery){
    jQuery(window).load(function(){

    jQuery(“.scrollcontent,.scrollcontent2″).mCustomScrollbar();

    });
    })(jQuery);

    Reply
  40. sten
    Posted on February 22, 2014 at 22:06 Permalink

    Hello any Answer how i can disable the autoscroll to top after ajax request?

    Reply
    • m4n3k4s
      Posted on March 3, 2014 at 18:27 Permalink

      $(“.content”).mCustomScrollbar({
      advanced:{
      autoScrollOnFocus: false
      }
      });

      Reply
      • sten
        Posted on March 12, 2014 at 17:30 Permalink

        Thx but it doesnt work…

        Reply
      • sten
        Posted on March 12, 2014 at 18:04 Permalink

        Thx but it doesnt work. I have 2.8.3 but dont work…

        Reply
        • m4n3k4s
          Posted on March 20, 2014 at 16:57 Permalink

          I have the same version and it’s working for me.

          In my case I have:
          $("#my_container").mCustomScrollbar({ advanced:{ autoScrollOnFocus: false } });

          Reply
          • sten
            Posted on March 21, 2014 at 16:42 Permalink

            Here the Link from my Page:

            http://grr.comgames.de/index.php?news

            On the left Side click on the Teamspeak Icon. After 10 Sec the Viewer refresh.

            $(‘#’ + sid + ‘.viewin’).mCustomScrollbar({
            scrollInertia : 400,
            autoHideScrollbar : false,
            advanced : {
            autoScrollOnFocus: false,
            updateOnContentResize : true

            }
            });

            Thats my Code and you see after Refresh the Scrollbar goes on top.

            Wenn i dont use this Script also the normal Scrollbar then it works.

  41. sten
    Posted on February 22, 2014 at 00:20 Permalink

    Allways after Ajax request the Scrollbar goes to top. How i can preprend this?

    Without the Plugin and css overflow:auto the problem is gone.

    Reply
  42. Jason
    Posted on February 19, 2014 at 12:06 Permalink

    Thank you for the great work. I was looking for scroll bars like these. I came across your website and these are much better than I thought I could get. Again awesome work!!!

    Reply
  43. ron
    Posted on February 17, 2014 at 12:15 Permalink

    Hi there,

    I think i have an idea fo new feature (or maybe it exists, or soemoene has figured it out how to do this)
    When scroller is updating, it scrolls for amount of height which is equal to height of added content.
    Is there any possibility to update scrollbar but without changing view/dragger position ?

    Thanks in advance for any response,
    ron

    Reply
  44. Amruta
    Posted on February 13, 2014 at 14:42 Permalink

    I have a jsp with frameset in it. I want to apply the custom scroll to this jsp, since no body tag, i am keeping the scroll for the frameset.
    Code is as follows:

    (function($){
    $(window).load(function(){
    $(“#mainFrame”).mCustomScrollbar({
    theme:”dark”
    });
    });
    })(jQuery);

    The problem is, the div which appends once the this(mCustomScrollbar mCS1) class is applied to the frameset, is not visible.
    I have inspected through firbug.

    Please help me on this, its really very urgent.
    Thanks

    Reply
  45. DenisVan
    Posted on February 13, 2014 at 01:28 Permalink

    Hi!

    picture tells a thousand words ;-)
    http://i23.img-up.net/errorsf223.png

    you must disable when you click on the circle on mouse (automatic scroll), this causes a problem (from example IE10, and more).

    Thanks malihu for fix this 2 bugs.

    Regards,
    DenisVan

    Reply
  46. Matthias
    Posted on February 13, 2014 at 01:11 Permalink

    Hi,
    amazing tool!

    I found out that there is a problem when using it with Zurb’s Foundation framework (5.0.3).

    The scrolling on iPads (and other devices?) is not working and also links inside the scrollbar don’t work on the first click.

    You can find a thread about this on stackoverflow:
    http://stackoverflow.com/questions/21741628/foundation-5-0-3-interfering-with-mcustomscrollbar-on-ipad-with-regards-to-touch

    Thanks for any hints!

    Reply
  47. Wendell Jones
    Posted on February 12, 2014 at 02:02 Permalink

    Can’t get this work in IE10, as a matter of fact—it locks up the textarea component completely! Must be something I’m over looking

    Reply
  48. Mirko
    Posted on February 11, 2014 at 17:20 Permalink

    Hi, great plugin, but it doesn’t seem to work on IE 11 for Surface (on PC works fine). I have tested the demos page (http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html) but with that tablet doesn’t work. Instead on IPAD and Nexus it works fine. Any ideas? thx

    Reply
    • Mirko
      Posted on February 11, 2014 at 17:23 Permalink

      by the way, I have also set the ‘contentTouchScroll: true’ option in my tests but to no avail.

      Reply
      • Dovis
        Posted on February 26, 2014 at 17:29 Permalink

        Yeah, it also doesn’t work on IE mobile on Nokia lumia 520.

        Reply

Comments pages: 1 13 14 15


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