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

jQuery custom content scroller


Code examples and tutorials

Responsive custom scrollbar with CSS3 media queries

How to use custom scrollbar plugin with CSS3 media queries and switch between vertical and horizontal scrollbars according to viewport size.

Scroll to id within element with custom scrollbar(s)

A simple jquery function to make all links pointing to id attributes within the page, work on content with custom scrollbars.

Horizontal custom scrollbar tutorial

Extensive tutorial for creating horizontally stacked content with the custom scrollbar plugin.


Pages: 1 2 3 4


Post a comment

Comments pages: 1 80 81 82

  1. Vlad
    Posted on November 7, 2018 at 22:12 Permalink

    How hide address bar in android browsers when scrolling like scroll by default?

  2. ayr
    Posted on October 31, 2018 at 20:20 Permalink

    How can I dynamically change the axis? I tried an if statement and recalled the plugin within the if statement but it didn’t work.

  3. Lee Kwang Dell
    Posted on October 27, 2018 at 07:42 Permalink

    how i can get the position of div# in myCustomscroll

  4. Owaiz Yusufi
    Posted on October 25, 2018 at 07:25 Permalink

    Does it works with jquery 3.3.1?

  5. Renat
    Posted on October 23, 2018 at 16:57 Permalink


    I have created container with popup inside it that can be snown (block) /hidden (none).
    Container is “.mCustomScrollBar”
    Popup has position: absolute. Popup height is greater than container height.
    When popup get’s visble then it is truncated by container.
    I tried “advanced : { updateOnContentResize : true}” but no luck.


    • Andre
      Posted on November 11, 2018 at 02:46 Permalink

      I have the same problem.

  6. John
    Posted on October 12, 2018 at 22:49 Permalink

    Hello Malihu,

    Excellent plugin you created, Thanks.

    Just would like to know how to stop it from calculating the margin top off screen with the minus sign, even though
    in my configuration setTop is set to zero (0).

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

  7. Truth to be told
    Posted on October 10, 2018 at 07:16 Permalink

    This project seems to be dead and contains many problems. Last time GitHub repository have been updated over 2 years ago. Add to that 358 open issues for simple scroll is way too much.

    I recommend to look for better alternatives and there are plenty of them. Malihu-custom-scrollbar was hard to use, heavy and buggy.


  8. Davidth
    Posted on October 9, 2018 at 14:15 Permalink

    it doesn’t work for me

  9. Nik
    Posted on October 9, 2018 at 03:11 Permalink

    Hello. It seems to me that search functionality doesn’t work. I press Ctrl+F in any browser and try to find a word – nothing happens. The plugin doesn’t scroll to the position of the found text. How can I fix this issue? Thanks

  10. Sunil
    Posted on September 2, 2018 at 14:51 Permalink

    Hello ,

    how to set default position bottom in below line


    { axis: ‘y’,theme: ’rounded-dark’}

  11. Yvan COYAUD
    Posted on August 10, 2018 at 10:40 Permalink

    Hello everybody
    When I include the malihu library (version 3.0.6) I have the following error:

    Uncaught ReferenceError: module is not defined at jquery.mousewheel.min.js: 8

    If I remove this library the error disappears …
    Does anyone have an idea to correct this error?
    thank you for your answers

  12. Chen zhaoyang
    Posted on July 24, 2018 at 11:46 Permalink

    How does calling Ajax determine whether scrolling is up or down?

  13. Squall
    Posted on July 19, 2018 at 18:13 Permalink

    Can I make, for example, 2 horizontal scroll bars?

  14. Debashis
    Posted on July 14, 2018 at 11:15 Permalink

    I am trying to use it with ReactJS and Meteor and getting this error in the console.

    Uncaught ReferenceError: module is not defined
    at jquery.mCustomScrollbar.concat.min.js:2

  15. Pratheesh
    Posted on July 13, 2018 at 19:49 Permalink


    Is there a way I can sync scrolls of a div with another scroll in another.
    That is when I scroll the first one second one also scrolls


  16. Parth
    Posted on July 5, 2018 at 15:38 Permalink

    I have initially set the the height of my panel. Now on window resize, how do I update the size of my panel i.e. from 600 to 100?

    Here’s the config object:
    $scope.scrollbarConfig = {
    autoHideScrollbar: true,
    horizRailEnabled: false,
    theme: ‘light’,
    advanced: {
    updateOnContentResize: true
    setHeight: 600,
    scrollInertia: 0

  17. Viet Nam
    Posted on June 28, 2018 at 09:50 Permalink

    Issues conflict with scroll to zoom in/out “jQuery Cropper” inside “mCustomScrollbar”
    on desktop unable zoom out
    on mobile scroll is corrupt.


Comments pages: 1 80 81 82

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>