All geek questions in one place

Hidden scroll bar if you don't resize the page

I need a custom scroll plugin for my personal project (by “normal” I mean basic inertia effects, custom images, etc.). My choice was mCustomScrollbar .

The documentation was really very clear, and I had no problems with the implementation of the script, but it only works when the page is resized, as if scrolling is not needed.

In fact, the scroll bar has style="display: hidden" on a fully loaded page, as in this question (but I did not find any useful answers).

I believe the height problem is related to slidesjs (which I use as well), but I just can't find it ... here is the code:

( There is a whole page , so you can view the code with firebug ... just go to "Pulcini" to view the long content)

 <head> <!-- everything is included --> <link href="css/style.css" type="text/css" rel="stylesheet" /> <link href="css/jquery.mCustomScrollbar.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="js/jquery.mCustomScrollbar.js"></script> <script> $(function(){ $("#slides").slides({ generatePagination: false, pagination: true, paginationClass: 'pagination' }); }); </script> <script> (function($){ $(window).load(function(){ $("#slide2").mCustomScrollbar(); }); })(jQuery); </script> </head> <body> <div id="slides"> <!-- other stuff --> <div class="slides_container"> <div id="slide1"> <h2>Uova</h2> <p>Text1...</p> </div> <!-- slide2 is the scrollbar div --> <div id="slide2"> <h2>Blabla</h2> <p>Lorem ipsum</p><br /> </div> </div> </div> </body>

CSS

 div#slides { height: 506px; } .slides_container { width: 900px; height: 506px; } .slides_container, div#slide1, div#slide2, div#slide3, { width: 808px; height: 366px; display: block; float: left; overflow-y: auto; } .slides_container { margin-top: 30px; margin-bottom: 30px; height: 366px; }​
+6
source share
3 answers

I had the same problem. So I changed the fluid code for updateOnBrowserResize: true and updateOnContentResize: true , and now it works fine with all javascript.

 (function($) { $(window).load(function() { $("#content_1").mCustomScrollbar({ scrollEasing:"easeOutCirc", mouseWheel:"auto", autoDraggerLength:true, advanced:{ updateOnBrowserResize:true, updateOnContentResize:true } // removed extra commas }); }); })(jQuery);
+16
source

You initialize mCustomScrollbar while the container is still hidden, so the browser cannot calculate the height of the div. You will need to either raise the resize event when the div becomes visible, or not initialize the scroll bar until it becomes active on the page.

+3
source

http://manos.malihu.gr/jquery-custom-content-scroller/

This is a very good link for a custom scrollbar. I also use this plugin in my projects, which you can easily customize, and nested scrollbars are also available here.

0
source

Source: https://habr.com/ru/post/925032/

More articles:


All Articles