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

jQuery custom content scroller

 

Frequently Asked Questions

  • Set scrollInertia option parameter to 0 (zero)

    $(selector).mCustomScrollbar({
        scrollInertia: 0
    });
    
  • There's an object generated by the script which lets you know how scrolling events where last triggered. The object returns "internal" (default) for events triggered by plugin script or "external" for events triggered by other scripts (e.g. via the scrollTo method).
    You can access the object like this: object.data("mCS").trigger
    Example:

    if($(selector).data("mCS").trigger==="external"){
        //last scrolling event was triggered by scrollTo method
    }else{
        //last scrolling event was triggered by the user
    }
    
  • You can use mouseWheel:preventDefault option parameter:

    $(selector).mCustomScrollbar({
        mouseWheel:{ preventDefault: true }
    });
    

    This will affect mouse-wheel scrolling. There's no option for touch, as depending on the device, page layout and zoom level, it can easily render the page/rest of the content unusable.

  • To update the content on elements that already have custom scrollbar(s), you need to add/append the new content inside the .mCSB_container element (instead directly to the element you called mCustomScrollbar function).
    Example:

    //scrollbar initialization 
    $(".content").mCustomScrollbar();
    
    //at some point later on (within another script, function, ajax call etc.)
    $(".content .mCSB_container").append("

    new content...

    "); //or targeting a specific .mCSB_container element (usefull with nested scrollbars) $("#mCSB_1_container").append("

    new content...

    ");
  • This is done via CSS. You can edit directly jquery.mCustomScrollbar.css or overwrite the rules in your own stylesheet. The buttons classes are mCSB_buttonUp and mCSB_buttonDown. By default, the arrow images are set using CSS image sprites, meaning that all themes arrows are contained in a single file: mCSB_buttons.png.

    To change the dimensions of the buttons, you need to adjust few additional CSS rules to compensate for the new buttons sizes. Below is an example of changing the size of buttons to 26x26 pixels (from the default 16x20 pixels) with a custom image for each one.

    
    
  • There are multiple ways of doing this. You can use specific theme(s) (e.g. "minimal"), option parameters like scrollbarPosition and/or edit the CSS rules directly. For more info see author's reply to a similar question in comments.

  • You can have a fixed size scrollbar that doesn't change its dimensions according to content length by following these steps:

    1. Set autoDraggerLength option to false
    2. Set your desired scrollbar height on line 106 of jquery.mCustomScrollbar.css, or in your own stylesheet using the "mCSB_dragger" class:
      .mCSB_scrollTools .mCSB_dragger{ height: 30px; }
      For horizontal scrollbars, set its width on line 177 of jquery.mCustomScrollbar.css, or in your CSS:
      .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; }
  • You can use the live option parameter and call mCustomScrollbar function normally without having to wait for the dynamic elements to be available in the DOM.
    Example:

    $(selector).mCustomScrollbar({
    	live: "on"
    });
    

    You can also use: live: "once" to disable the live option event after the first invocation.

    To disable the live option at any point set live option to "off":

    $(selector).mCustomScrollbar({
    	live: "off"
    });
    

    An alternative way to live is the liveSelector option parameter which you can define the matching set of elements (instead of the current selector) to add scrollbar(s) when available:

    $(selector).mCustomScrollbar({
    	liveSelector: ".my-future-class"
    });
    
  • Yes but for the horizontal scrollbar you'll need a couple of special CSS rules. See this comment for code examples.

  • Normally, if your content works with browser's default horizontal scrollbar, it should also work with the custom one. If you've already set axis: "x" (to enable horizontal scrollbar), there's a good chance you also need to set autoExpandHorizontalScroll option parameter to true. For example:

    $(selector).mCustomScrollbar({
    	axis: "x",
    	advanced:{ autoExpandHorizontalScroll: true }
    });
    
  • Yes. See this thread on github. You can do $(selector).data("mCS").opt.mouseWheel.scrollAmount=0; to disable it and $(selector).data("mCS").opt.mouseWheel.scrollAmount="auto"; to (re)enable it.

  • There are more than one ways available to start scrolling from the bottom at initialization:

    1. Chaining scrollTo method

    $(selector).mCustomScrollbar({
        //your options...
    }).mCustomScrollbar("scrollTo","bottom",{scrollInertia:0});
    

    2. Using setTop option

    $(selector).mCustomScrollbar({
        setTop:"-999999px"
    });
    
  • If you're developing a right-to-left (RTL) text web page, the scrollbar will switch to the left side automatically (assuming you're using either HTML dir="rtl" or CSS direction: rtl). To set the scrollbar on the left manually, you need to change or overwrite the rules in lines 65 and 54 of jquery.mCustomScrollbar.css.

    For example, adding the following to your CSS will overwrite the above rules and set the default vertical scrollbar on the left of content:

    /* reset/remove right position so scrollbar appears on left */
    .mCustomScrollbar .mCSB_scrollTools{ 
      right: auto;
    }
    
    /* switch margin from right to left */
    .mCustomScrollbar .mCSB_inside > .mCSB_container{ 
      margin-right: 0;
      margin-left: 30px;
    }
    
  • You can do this by checking the viewport width and initializing or destroying the custom scrollbar accordingly. The condition to check viewport width should match CSS media queries and triggered on page load and browser resize. There are two ways you can do this:

    1. Using Window.matchMedia() (IE10+)

    (function($){
        $(window).on("load resize",function(){
            if(window.matchMedia("(min-width: 640px)").matches){
                $("#your-element-id").mCustomScrollbar({ /* scrollbar options */ });
            }else{
                $("#your-element-id").mCustomScrollbar("destroy");
            }
        });
    })(jQuery);
    

    2. Checking a CSS rule that the media query changes (should always work)

    Assuming your element is #content-1:

    /* CSS */ 
    #content-1:after{ display: none; content: "custom-scrollbar"; }
    @media screen and (max-width: 640px){
        #content-1:after{ content: ""; }
    }
    
    /* JS */
    (function($){
        $(window).on("load resize",function(){
            var selector="#content-1", //your element(s) selector
                cssFlag=window.getComputedStyle(document.querySelector(selector),":after").getPropertyValue("content").replace(/"/g,'');
            if(cssFlag){
                $(selector).mCustomScrollbar({ /* scrollbar options */ });
            }else{
                $(selector).mCustomScrollbar("destroy");
            }
        });
    })(jQuery);
    
  • Yes but you’ll need extra markup to separate thead from tbody and fixed-width (in pixels, percentage etc.) table cells. This is the best way to have a table with fixed header with or without a custom scrollbar.

    I've created a working example at http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/table-fixed-header-test.html which uses 2 separate tables (one for header and one for body) and 2 extra divs (one body wrapper and one overall wrapper).

 

Pages: 1 2 3 4


5,516 Comments

Post a comment

Comments pages: 1 79 80 81

  1. shabana
    Posted on May 22, 2018 at 09:57 Permalink

    How to assign setHeight property set to “max-height” instead of “height” property

    Reply
  2. Jon Letovsky
    Posted on May 12, 2018 at 19:35 Permalink

    Can you add in widjet title for button Top Left Down and Right for scroll? WCAG 2.0 show issuse for availability.

    Second question: witch selecetor for this module. All widget have a jQuery selector type jQuery(‘:namespace-widgetname’), but i don’t know witch namespace for u

    Reply
  3. Hossein
    Posted on April 5, 2018 at 15:00 Permalink

    Hi guys,
    How can i add horizontal scroll ?!
    regards, Hossein.

    Reply
  4. ghazaland
    Posted on March 4, 2018 at 13:28 Permalink

    perfect article
    tnx

    Reply
  5. Robert
    Posted on March 3, 2018 at 17:53 Permalink

    Right side iframe content chopped off. Inspector (firebug) shows this is the culprit:

    What do I need to do? Can I modify the CSS?

    Thanks

    Best regards

    Reply
    • Robert
      Posted on March 3, 2018 at 17:56 Permalink

      Forgot the code markers

      <div id="mCSB_1_container" class="mCSB_container" style="position: relative; top: -109px; left: 0px;" dir="ltr">

      How do you edit comments????

      Reply
  6. طراحی سایت
    Posted on February 26, 2018 at 11:35 Permalink

    Hi
    Is this plugin work on mobile device?

    Reply
  7. Robert
    Posted on February 26, 2018 at 04:37 Permalink

    style.css causing lots of problems to override.

    For instance:

    a:hover{
    text-decoration: none;
    color: #fff;

    Causing link text to disappear with mouse over.

    I ust took all the files and put them into website and started overriding
    many css parameters.

    Have I done something incorrectly here?

    Reply
  8. Robet
    Posted on February 26, 2018 at 02:22 Permalink

    I have several buttons which load different info into the iframe. Some long some short. No scroll bars just drag or mouse wheel. Several issues:

    1. Having loaded a long doc and scrolled to the bottom, then clicking to load a short item, the shoirt item cannot bee seen until I scroll to the top. My code for loading the iframe is javascript. Can I just add the following to the code block?

    $(‘”#logincontainer”).mCustomScrollbar(‘scrollTo’,[‘top’,null]);

    Or do these things have to be called in the scrollbar start up code or is you demo a stand a standalone??

    2. I thought the scrolling was only provided when the content was longer than the container. I load a short item
    and it still scrolls darg or mouse wheel???

    Thanks and best regards

    Reply
    • Robert
      Posted on February 26, 2018 at 20:53 Permalink

      Item 1 resolved. Why do examples show .content??

      Item 2 still open:

      2. I thought the scrolling was only provided when the content was longer than the container. I load a short item
      and it still scrolls darg or mouse wheel???

      Reply
  9. Robert
    Posted on February 24, 2018 at 17:47 Permalink

    How can I I allow scrolling but w/o the scroll bars?

    Thanks

    Best regards

    Reply
    • Robert
      Posted on February 26, 2018 at 01:59 Permalink

      Override .content :
      .content{ overflow: hidden;

      oveflow hidden rather than scroll

      Reply
  10. Sammy95
    Posted on February 6, 2018 at 16:22 Permalink

    mCustomScrollbar don’t catch wheel event if mouse pointer locate over iframe (any social buttons). In this case scrolling base browser window, not my block.
    Any ideas for workarround?

    Reply
  11. Guilherme
    Posted on February 1, 2018 at 20:39 Permalink

    I have a problem scrolling the content when I insert on the container CSS transition.
    A sidebar menu is using the custom scroll and it can be minized, so i put this code to do smoothly

    .left-container * { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

    problem is that i have a container, and when transition and mCustomScroller is combined the scroll messup

    Reply
    • Guilherme
      Posted on February 1, 2018 at 21:32 Permalink

      I changed my CSS to apply the transition only on the elements that have a change and work, just ignore the resquest…

      Reply
  12. kxjl
    Posted on January 26, 2018 at 10:00 Permalink

    that is very cool!
    well done!

    this is my new site my site

    Reply
  13. Sergey
    Posted on January 16, 2018 at 13:22 Permalink

    Thanks for plugin ! He help me for many projects.

    Reply
  14. boys
    Posted on December 28, 2017 at 12:10 Permalink

    requirejs how use

    Reply
  15. Siva
    Posted on December 27, 2017 at 08:49 Permalink

    how can i use swipe in mcustom scrollbar example please

    Reply
    • Siva
      Posted on December 27, 2017 at 08:50 Permalink

      how can i use swipe in mcustom scrollbar example please in desktop / non touch device

      Reply
      • Mike
        Posted on March 16, 2018 at 18:59 Permalink

        Did you ever figure this out? I’m trying to do the same thing, allow content to be dragged with mouse and scroll. Particularly when you have a horizontal list of image thumbnails.

        Reply
  16. backnext
    Posted on December 23, 2017 at 19:20 Permalink

    I use the 3d-thick-dark theme for people with visual problems. I want the scrollbar really thick. I know I have to change “width” and “left” of .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar But I don’t find what else to change. Any idea?

    Reply
  17. Bilja
    Posted on December 8, 2017 at 12:35 Permalink

    Can I have a horizontal scroller that is moved from left to right, not right to left.
    Better than, can I have two scroller images section, with one scrollbar in the middle for both section.
    Top scroller section to move from right to left, and bottom scroller section to move from left to right on same scrollbar move.

    Thank you

    Reply
  18. Keyser
    Posted on December 4, 2017 at 14:36 Permalink

    Hello,
    Thank to share with us your nice plugin veru usefull.
    Im searching for a callback to check if all mCustomScrollbar are ready then do something.
    Any idea ?

    Thank to everyone

    Reply
  19. rizwan
    Posted on November 22, 2017 at 12:26 Permalink

    scrollbar not working in IE-Edge latest browser any solution how to overcome this problem??

    Reply
    • lmb
      Posted on December 20, 2017 at 10:46 Permalink

      Same problem here on edge, can scroll down, but on scroll up keep going down …
      Works perfectly fine on chrome & firefox.
      Any fix soon ?

      Reply
  20. Cyril
    Posted on November 16, 2017 at 19:54 Permalink

    Hi,

    I’ve have an issue when i use this plugin with jquery sortable on scrolling up and down during sort.
    With natural scrollbar no problem. But when the plugin is in use, the scroll doesn’t work.

    Any idea ?

    Reply
  21. pipes-manysman
    Posted on November 15, 2017 at 10:42 Permalink

    Hi
    I’m using your jQuery Scrollbar and it works very well
    thanks

    Reply
  22. Arun
    Posted on November 8, 2017 at 22:01 Permalink

    Hi,

    I am loading a div’s dynamically onclick of a button inside the scroll content (horizontal scroll). But if I have content above the scroll div and then I append the div, whole page jumps a little bit to top.Kind off annoying.

    Any help?

    Same issue could be recreated in our “max-width_example” too. If we add some dummy text on top of the scroll parent div and then click add image link, the page jumps slightly to top. Sorry if the issue is already been asked in this forum.

    Reply
  23. Andrea
    Posted on October 28, 2017 at 17:11 Permalink

    Hi guys, can you tell me why when I click on a input text of a form the site returns on the first page? Sorry for my bad english

    Reply
    • Keyser
      Posted on December 4, 2017 at 14:39 Permalink

      Just add preventDeault function in your event like :

      $('body').click(function(event) { event.preventDefault(); // do what you want now });

      Reply
  24. Julien
    Posted on October 6, 2017 at 11:47 Permalink

    For those who came into the same issue (everything works except one finger scrolling on Mozilla Firefox 45) this is due to Mozilla configuration. Go into about:config then setting dom.w3c_pointer_events.enabled to true did the trick.

    Reply

Comments pages: 1 79 80 81

Post a comment

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

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

css.php