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 https://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,618 Comments

Post a comment

Comments pages: 1 82 83 84

  1. serdar
    Posted on February 15, 2024 at 16:55 Permalink

    Hello, can I make the scroll bar appear from a certain place in the navbar?

    Reply
  2. serdar
    Posted on November 9, 2023 at 13:50 Permalink

    hello your application is very nice.but it gives error in jquery v3.7.1 version.your application works up to which version of jquery is the latest? thanks

    Reply
  3. Ansu Man
    Posted on September 15, 2023 at 09:37 Permalink

    Awesome information. Thanks for sharing.

    Reply
  4. Royal Clipping
    Posted on August 30, 2023 at 12:13 Permalink

    I hope I’ll suggest someone to see this tutorial who love to make crochet.

    Reply
  5. San Mateo
    Posted on June 24, 2023 at 05:37 Permalink

    Wow, this highly customizable custom scrollbar jQuery plugin sounds amazing! It seems to have all the features one could ever need for a smooth and efficient scrolling experience on a website.

    The fact that it offers both vertical and horizontal scrollbar options is fantastic, as it allows for complete flexibility depending on the layout and content of the page. I can imagine how convenient it would be to have adjustable scrolling momentum, which would enable users to fine-tune their scrolling speed according to their preference.

    The ability to define user callbacks is another feature that caught my attention. It opens up endless possibilities for implementing additional custom functionality and integrating the scrollbar plugin with other parts of the website.

    Reply
  6. Timothy Nevious
    Posted on June 14, 2023 at 09:02 Permalink

    The jQuery Custom Content Scroller plugin by Malihu is an excellent tool for web developers who want to add custom scrollbars to their web pages. This plugin is highly customizable and offers a wide range of features such as vertical/horizontal scrolling, mouse-wheel support, touch support, and much more. With the help of this plugin, you can easily create a unique and user-friendly scrolling experience for your website visitors. Overall, I highly recommend the jQuery Custom Content Scroller plugin for anyone looking to enhance their website’s scrolling functionality.

    Reply
  7. William Thomas
    Posted on June 10, 2023 at 12:57 Permalink

    I recently used jQuery custom content scroller to create a smooth browsing experience on my website. It was really easy to use and allowed me to have full control over the scrollbar. The customizable themes were great as well, and I was able to easily add my own custom look. I highly recommend this plugin for those looking for a great custom scrollbar experience!

    I enjoyed your blog Somuch. Would mind reading my blog aout Editing night phots in lightroom

    Reply
  8. Mauro Vicariotto
    Posted on June 4, 2023 at 20:58 Permalink

    Your plugin is very good and I’m using it since 2019.
    It’s a pity that with jQuery 3.7.0 the rail dots don’t work properly in drak dots theme (my preferred).
    It works until jQuery 3.4.0 (probably 3.6.0 but didn’t test): since 3.7.0 the rail disappears, function repeat-y doesn’t work and appear only first black dot and first blank space (base64).

    Reply
    • serdar
      Posted on November 9, 2023 at 13:52 Permalink

      Hello, I tried it, it gives an error in 3.7.1, you tested it and it works in the latest version up to 3.4.0, right?

      Reply
  9. PBR
    Posted on May 17, 2023 at 14:21 Permalink

    I am using mCustomscrollbar plugin for firefox browser, to. make visible scrollbar for datatable, after using this plugin the scrollbar is visible. But the issue is here is sticky header and footer are not sticky. Can any one help me resolve this issue. Thank you.

    Reply
  10. clipping world
    Posted on May 17, 2023 at 14:17 Permalink

    providing a seamless and engaging user experience is crucial for any website or application. One remarkable tool that has revolutionized the way we handle scrolling and content navigation is the jQuery Custom Content Scroller. This powerful and versatile solution has garnered widespread acclaim for its ability to transform the way users interact with web content, making browsing a truly enjoyable and intuitive experience.

    Reply
  11. Rajasekar
    Posted on April 6, 2023 at 15:10 Permalink

    How can we scroll the content left and right side while click on the content and hold the mouse click instead of mouse wheel?

    Reply
  12. pixel clipping
    Posted on April 3, 2023 at 23:22 Permalink

    Excellent post. I understand some tough stuff on different blogs everyday. Usually it is to study the content using their company writers and stimulate some rehearsals from their store. I’d rather use something with the content on my weblog if you don’t mind. Naturally I’ll provide you with a link on your web blog. Thanks for sharing. see my website https://pixelclippingpath.com/

    Reply
  13. Panny
    Posted on April 1, 2023 at 20:17 Permalink

    Great post that shows how a major Deep Learning accomplishment works

    Reply
  14. Eric
    Posted on March 24, 2023 at 12:10 Permalink

    You can visit https://triviatalent.com/daily-trivia/ to see how it work.

    Reply
  15. Alisa
    Posted on March 13, 2023 at 06:25 Permalink

    How to make a horizontal scroll bar?
    Thanks for previous informations.

    Reply
  16. lihua
    Posted on February 20, 2023 at 13:24 Permalink

    Hi! How to make a horizontal scroll bar scroll from right to left in an RTL layout?

    Reply
  17. Lance
    Posted on February 17, 2023 at 06:45 Permalink

    Great post that shows how a major Deep Learning accomplishment works

    Reply
  18. Biju
    Posted on February 10, 2023 at 08:06 Permalink

    Hi. How can we smooth mousewheel scrolling? Inertia only works with the dragger bar. Thanks.

    Reply
  19. Slava
    Posted on November 3, 2022 at 15:42 Permalink

    Hello! Please tell me how to add a class to the active link when scrolling?

    Reply
  20. jaspreet singh
    Posted on April 18, 2022 at 11:28 Permalink

    Hi Malihu,

    Can we position the dragbar only at the top of the content instead of the bottom of the content in case of vertical scrollbar?

    Reply
  21. Brian Hearne
    Posted on March 29, 2022 at 15:54 Permalink

    Hi there. How can we achieve smooth scrolling with the mousewheel? The inertia setting only seems to work with the dragger bar. many thanks.

    Reply
  22. Rahul
    Posted on February 27, 2022 at 20:46 Permalink

    Hi
    i am getting an error such as e.indexOf is not a function while using uodated version with jquery 3.6.0

    Reply
    • San
      Posted on September 2, 2022 at 14:13 Permalink

      Me too…

      Version 3.1.5. and JQuery 3.6
      Downloaded, Linked and with the initialization via javascript I get the following Error:

      $(…).mCustomScrollbar is not a function

      🙁

      Reply
    • Pawel
      Posted on September 29, 2023 at 12:53 Permalink

      I also had e.indexOf is not function error using plugin version 3.0.6. I then switched to newer – 3.1.5 and there is no error.

      Reply
  23. [email protected]
    Posted on February 9, 2022 at 13:15 Permalink

    Well,
    you can also do it with CSS only.

    Reply

Comments pages: 1 82 83 84

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