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

Upgrading version 2.x to 3.x

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

Version 2.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.
advanced:{ releaseDraggableSelectors: string }
Add extra selector(s) that’ll release scrollbar dragging upon mouseup, pointerup, touchend etc. (e.g. releaseDraggableSelectors: ".myClass, #myID").
theme: string
Set the scrollbar theme (plugin’s CSS contains ready-to-use themes). The default theme is "light"
callbacks:{
    onInit: function(){}
}
A function (or custom code) to call when scrollbars have initialized (callbacks demo). Example:
callbacks:{
  onInit:function(){
    console.log("scrollbars initialized");
  }
}
Set to false (default) to disable.
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.
callbacks:{
    onOverflowY: function(){}
}
A function (or custom code) to call when content becomes long enough and vertical scrollbar is added. Example:
callbacks:{
  onOverflowY:function(){
    console.log("Vertical scrolling required");
  }
}
Set to false (default) to disable.
callbacks:{
    onOverflowX: function(){}
}
A function (or custom code) to call when content becomes wide enough and horizontal scrollbar is added. Example:
callbacks:{
  onOverflowX:function(){
    console.log("Horizontal scrolling required");
  }
}
Set to false (default) to disable.
callbacks:{
    onOverflowYNone: function(){}
}
A function (or custom code) to call when content becomes short enough and vertical scrollbar is removed. Example:
callbacks:{
  onOverflowYNone:function(){
    console.log("Vertical scrolling is not required");
  }
}
Set to false (default) to disable.
callbacks:{
    onOverflowXNone: function(){}
}
A function (or custom code) to call when content becomes narrow enough and horizontal scrollbar is removed. Example:
callbacks:{
  onOverflowXNone:function(){
    console.log("Horizontal scrolling is not required");
  }
}
Set to false (default) to disable.
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
});
timeout: Integer
Set a timeout for the method (the default timeout is 60 ms in order to work with automatic scrollbar update), value in milliseconds. Example:
$(selector).mCustomScrollbar("scrollTo","top",{
  timeout:1000
});

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

Post a comment

Comments pages: 1 53 54 55

  1. Elkrocke
    Posted on October 24, 2014 at 22:43 Permalink

    I want to use a scrollbar within a scrollbar. I see something going on but its not scrolling or showing the dragbar. Do I need to add extra settings to make a scrollbar work within a scrollbar?

    Reply
    • Elkrocke
      Posted on October 25, 2014 at 00:07 Permalink

      I can scroll but the content seems to bounce back up to the beginning automatically.

      Reply
  2. Grily
    Posted on October 22, 2014 at 23:51 Permalink

    I’m trying to add this script to the body (or html) of my website as a replacement for the default scrollbar/scrolling, but it doesn’t seem to work when adding the css, jf and class.

    Hopefully you are able to help me out.

    Reply
    • malihu
      Posted on October 23, 2014 at 00:06 Permalink

      Does your body have a height set? You probably need:

      html, body { height: 100%; }

      Also check the full_page_demo.html (included in plugin archive):
      http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/full_page_demo.html

      Reply
      • Grily
        Posted on October 23, 2014 at 00:20 Permalink

        Thanks,

        That seemed to do the trick. One small thing that’s happening to the demo and my page: The default scrollbar loads first, so you see the default scrollbar for a slight second, disappears and then the custom scrollbar appears.

        Reply
        • malihu
          Posted on October 23, 2014 at 00:24 Permalink

          You can try: body{ overflow: hidden; }

          Reply
          • Grily
            Posted on October 23, 2014 at 01:05 Permalink

            That kind of did the trick, thanks.

            I just noticed your plugin is in conflict with my sticky navigation and back to top script though (loaded before the scrollbar).

        • malihu
          Posted on October 23, 2014 at 01:14 Permalink

          For page scrolling actions like back to top links you’ll need to use plugin’s scrollTo method (see Methods section).

          For you sticky navigation, it’s better to apply the scrollbar (and your content) in a div inside your body tag and place the navigation markup outside of it.

          Reply
  3. Kurt
    Posted on October 22, 2014 at 10:40 Permalink

    Hi Malihu,

    First of all great plugin! :)

    What can you tell me about CPU usage? I’ve noticed that there is quite a spike when loading the plugin.

    Thanks!

    Reply
    • malihu
      Posted on October 22, 2014 at 11:31 Permalink

      When plugin just loads or while functioning?

      I haven’t noticed any significant cpu spikes while using the scrollbar (scrolling, callbacks etc.). It depends greatly though on the length and kind of content scrolled (e.g. images with opacity or shadows always have an impact on performance).

      In general I haven’t experience any noticeable issues and I have “abused” the plugin (left it running on tabs for like days etc.). I also didn’t had any issues on the number of instances running (e.g. 1 vs 10).

      As far as the script goes, 90% of selectors are id based and the actual animation tween is pure javascript with sub-millisecond timings, requestAnimationFrame etc.

      This said, cpu usage depends on many things: content, browser engine, the actual cpu etc. On my iPad for example, the performance is worse than my desktop as its cpu is pretty weak and the code required to replicate native OS touch scrolling is more complex than the one using a cursor/trackpad.

      If you’d like, you can send me an email with more info or link to check :)

      Reply
  4. kenvil devil
    Posted on October 21, 2014 at 12:49 Permalink

    Hi!
    If i want dragable on desktop, how to do that? Thanks. On touch devices it’s ok.

    Reply
    • malihu
      Posted on October 21, 2014 at 13:28 Permalink

      Hi,

      If you mean dragging the actual content with your cursor, it’s not possible. Normally on desktop content needs to be selectable, contain forms etc. so there’s no such functionality within plugin script (it would need some custom script mods).

      Reply
  5. Jean
    Posted on October 20, 2014 at 10:20 Permalink

    You see how much I’m terrible I wanted to send the script to my page.

    Sorry but even that I do not do.

    If I abuse do not hesitate to tell me, I would not put scrollbar.

    Reply
    • malihu
      Posted on October 20, 2014 at 11:06 Permalink

      No problem. I’ll send you an e-mail and we’ll talk from there.

      Reply
  6. Jean
    Posted on October 19, 2014 at 15:18 Permalink

    hello,
    Sorry I suck at programming and I desperately attempts to install your plugin that I find great.
    Can you help me?
    I am running wordpress with the theme Adventure newspaper and I would like insert a scrollbar in my blocquote “comments” on my homepage.
    I downloaded the archive, and I put it on my server. I then put in my header.php section head. Then still in my header.php the following lines in the Body part:

    (function ($) {
    $ (window) .load (function () {
    $ mCustomScrollbar () (“content.”).;
    });
    }) (jQuery);

    My problem is:
    1 – I do not see a scrollbar when my text on a page “test” is longer than my blockquote!

    2 – I also always have a little slideshow on the same page the image is larger than the blockquote. This still leaves the frame without the scrollbar but I also do little more to scroll through images when I click it!

    It happens that I have in my other “Cyclone Slider 2″ for the slideshow, “fancybox for wordpress” and “jQuery Mega Menu” as an extension.

    Thank you to tell me if you can help a draw.

    Reply
    • malihu
      Posted on October 19, 2014 at 20:21 Permalink

      Hi,
      There are some errors in your syntax.
      Just add the class “myScrollbar” to any element you want to have custom scrollbar (like your blockquote) and add the following in your head tag:

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

      Does this help?

      Reply
      • Jean
        Posted on October 19, 2014 at 21:13 Permalink

        When I told you I’m terrible this is a joke. I changed my syntax in my header as you have written me.
        however:
        1 I do not know where and how to add the class “myScrollbar” my blockquote
        2 slide my problem still exists as you can see on my page “test scrollbar” on the top right of my site.
        sorry again

        Reply
        • malihu
          Posted on October 20, 2014 at 01:43 Permalink

          OK. Do this:

          1.
          In your HTML (in the place you inserted the custom scrollbar code) remove:
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">

          as you’re already loading jQuery in the head tag.

          2.
          Change:
          <Script src="jquery.mCustomScrollbar.concat.min.js"></script>
          to:
          <script src="jquery.mCustomScrollbar.concat.min.js"></script>

          3.
          Change:
          <script> (function($){ $(window).load(function(){ $(".myScrollbar").mCustomScrollbar(); }); })(jQuery); </script>
          to:
          <script> (function($){ $(window).load(function(){ $("#col-main blockquote").mCustomScrollbar(); }); })(jQuery); </script>

          Reply
          • Jean
            Posted on October 20, 2014 at 21:14 Permalink

            Everything walks.
            It is the first time when I ask for help has somebody for my blog and I am pleasantly surprised with the brought help.
            I think of having understood the functioning and I am going to be able to arrange any ca at best.
            In the meantime, thank you very much for your help, your kindness, your availability and your patience.
            See you soon

Comments pages: 1 53 54 55


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