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

Post a comment

Comments pages: 1 78 79 80

  1. rajthilak
    Posted on June 14, 2017 at 08:57 Permalink

    I need to implement custom scroll for selectbox with multiple. Is there any way to give it ?

    Reply
  2. Rikul
    Posted on June 13, 2017 at 14:55 Permalink

    hello i have one problem in this scrollbar..when i add scroll in dropdown its looks perfect but when i dragge scroll on mouse my dropdown closed

    Reply
  3. Adriano
    Posted on June 9, 2017 at 19:51 Permalink

    Hi, seems that there is a bug when both scroll bars are active (vertical and horizontal) the trackpad horizontal scrolling stop working. Only the vertical one works.

    You can check this in the demo that have both scroll bards: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

    Do you think this can be fix in next release? it is a great library, but this issue is a deal breaker…

    Reply
  4. Anton
    Posted on June 9, 2017 at 16:29 Permalink

    Hello Community,

    i love the Scrollbars and the Work of Manos. Big Respect. 🙂

    But I have a problem related to another javascript application.
    In the footer section, HIGHSLIDE HTML CONTENTS (under OUR SERVICES … important are “online shops” and “print media”) where the content scroller is used. Open the first time the scrollbar, after the close and reopen it does not load anymore.

    I could unsuccessfully reload the whole html page, but this is not really nice.

    How can I eliminate this?

    Here the Page: http://html5.graphic-family.de

    Thanks for your advice.

    Anton

    Reply
  5. Rob
    Posted on June 2, 2017 at 14:54 Permalink

    How can I set option to hide scrollbar and show only when my inside elements reach my height?
    Example I have:

    element 1
    element 2
    element 3
    element 4

    #contentwithscroll has set in customscrollbar height to 350px
    I’d like to hide it and show only when elements reach this 350px.
    This are notifications.

    Thanks

    Reply
    • Rob
      Posted on June 2, 2017 at 14:55 Permalink

      Sorry in previous message I forgot about code tags:

      How can I set option to hide scrollbar and show only when my inside elements reach my height?
      Example I have:
      <ul> <div id="contentwithscroll"> <li>element 1</li> <li>element 2</li> <li>element 3</li> <li>element 4</li> </div>
      #contentwithscroll has set in customscrollbar height to 350px
      I’d like to hide it and show only when elements reach this 350px.
      This are notifications.

      Thanks

      Reply
  6. G7495x
    Posted on June 2, 2017 at 00:43 Permalink

    Is it possible to change the space between the scrollbar and the content

    Reply
  7. noob
    Posted on June 1, 2017 at 16:00 Permalink

    I need to change the theme inside a dropdown scrollable menu. How to do it? I was trying to change inside the HTML and the script, but nothing works.
    My idea is to add an update to that scrollbar, but I don’t know how.
    Can you please help me?
    Thank you in advance

    HTML:

    @Auth.Current.SelectedAccount.Name

    @foreach (var account in Auth.Current.AvailableAccounts)
    {

    @account.Name

    }

    the script:
    $(“#accountSelectorDropdown”).mCustomScrollbar({
    scrollInertia: 550,
    scrollbarPosition: “outside”,
    theme: “minimal-black”
    });

    the result:
    mCSB_scrollTools mCSB_3_scrollbar mCS-light mCSB_scrollTools_vertical

    Reply
    • noob
      Posted on June 1, 2017 at 16:06 Permalink

      <div class="account-selector-container"> <div class="dropdown"> <button class="btn btn-default btn-block dropdown-toggle" type="button" id="accountSelector" data-toggle="dropdown"> <span class="pull-left accountname">@Auth.Current.SelectedAccount.Name</span> <span class="caret"></span> </button> <div class=" mCustomScrollbar dropdown-menu scrollable-menu" data-mc-theme="minimal-dark" role="menu" aria-labelledby="accountSelector"> <ul id="accountSelectorDropdown" class="" > @foreach (var account in Auth.Current.AvailableAccounts) { <li role="presentation" class="@(Auth.Current.SelectedAccountId == account.AccountId ? "active" : "")"> <a role="menuitem" tabindex="-1" href="javascript:;" data-accountid="@account.AccountId">@account.Name</a> </li> } </ul> </div> </div> </div>

      Reply
      • noob
        Posted on June 2, 2017 at 09:38 Permalink

        SOLVED!
        changed the default theme inside of the original script

        Reply
  8. Alex
    Posted on May 29, 2017 at 00:19 Permalink

    Hi. I have some problem on android devices with horizontal scroll. Touch events doesn’t work on a document on a content area with custom scrollbar. Though, i don’t have such problems with ios.

    My option for plugin initializathion:

    eventSlider.mCustomScrollbar({ axis:"x", advanced:{ autoExpandHorizontalScroll:true, updateOnImageLoad: false }, contentTouchScroll: true, documentTouchScroll: true });

    Help me please)))

    Reply
    • Serzhei
      Posted on June 1, 2017 at 13:41 Permalink

      css style:
      .mCustomScrollbar{ -ms-touch-action: inherit; touch-action: inherit; /* MSPointer events – direct all pointer events to js */ }
      .mCustomScrollbar.mCS_no_scrollbar{ -ms-touch-action: inherit; touch-action: inherit; }

      Reply
      • Alex
        Posted on June 1, 2017 at 23:58 Permalink

        Thank you so much!!! It works!

        Reply
  9. هاست رایگان
    Posted on May 9, 2017 at 12:57 Permalink

    thank you very much
    this post is very nice
    thank you

    Reply
  10. Dave
    Posted on May 7, 2017 at 16:15 Permalink

    Hello!
    I love your scroller – I just had a question if you think users can PAN inside the scrolled DIV by JUST PRESSING ONCE on the scrollable region and moving the scrollable content with one the finger – without having to switch back and forth between the upper and lower scroll bars?
    Thanking you for your fantastic product!
    Dave

    Reply
  11. Shandy Elliott
    Posted on April 27, 2017 at 05:18 Permalink

    It appears that the scrollbar is coded to only appear if the height of its content is EQUAL to or GREATER than its parent container (which seems appropriate by default). I have a situation where I only want the scrollbar to appear if its content is GREATER than its parent; if content and parent are equal in height, then I do not want the scrollbar to appear. I could explain why I want this behavior, but it’s not really material to the question.

    How can I script the scrollbar to ONLY appear if its content is GREATER than its parent (not EQUAL)?

    Reply

Comments pages: 1 78 79 80

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