In one of the comments on this question I was asked to use the scrollbar malihu (jQuery plugin). It was not possible to ask a question in the comments on the developer page - the server is buggy there when sending a comment.

I did not manage to make this plugin work like this:

<head> ... <!--css--> <link rel="stylesheet" href="style/jquery.mCustomScrollbar.min.css"> <!--js--> <!--<script src="js/jquery-3.0.0.min.js"></script>--> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery.mCustomScrollbar.concat.min.js"></script> <script> (function($){ $(window).on("load",function(){ $("body").mCustomScrollbar({ theme:"minimal" }); }); })(jQuery); </script> </head>

I checked all the ways - everything is fine; connection with all files there. The script before closing </head> also works. I looked through the browser HTML code after rendering: new elements have been added. However, the browser still shows the standard scrollbar. Did I miss something?

Update

I checked the solution of user Dmitry on one of my projects and it worked. Here's what the working code looks like: the plugin assigns <body> its own class, "stuffs" the contents of the site before rendering, adds one more to the first <div> :

enter image description here

But on my other site the plugin worked incorrectly. As you can see in the figure below, the <body> class is assigned, and <div> s are not added:

enter image description here

What can it do? I can assume such options:

  • I have an adaptive layout, and the html-code is generated both when the page is loaded ( onload ), and when the window width is changed ( onresize ). Each time the contents are cleared and a new one is added. I described my code in more detail in this question (I will not duplicate it). I tried to embed the srollbar script into my code, but to no avail.
  • But maybe the case in the wrapper block, which also wraps the entire contents of the site? I can not even say why I suggested this, because I do not know the details of the technical implementation of the malihu scrollbar.
  • "... the browser still shows the standard plugin" standard scroll, apparently. if new elements are added, then a screen should be attached, I think, in order to understand how it does not work - lexxl
  • Yes, it’s not a question, I’ll attach a screen, but I’m hardly going to have any informativity (nothing except Ghrome-scrollbar is there, and there is no effect on the site’s content, so I didn’t include it in the screen). - Lateral Gleb

1 answer 1

Perhaps you need to write the necessary css-rules:

 $(document).ready(function() { $("body").mCustomScrollbar({ theme: "minimal" }); }); 
 html { height: 100%; } body { background: #000; height: 100%; overflow: hidden; margin: 0; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet" /> <div style="height: 2000px"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

  • Thank you for your reply. At one of my sites, your solution worked, but at the other, it didn’t. I added a description to the question. - Bokov Gleb