The scrollbar is automatically hidden if I don't resize the page

Question

I am using js plugin to create scrollbars. Basically, when you load a page, it automatically sets itself to "display: none" when it shouldn't be. Then, if you slightly resize the browser, it will switch to "display: block" and work correctly. I can’t understand for my whole life what’s wrong, especially because this is an exact copy of the code from the last two (different identifiers) that work correctly.

I believe this is appropriate code, but I can include other parts if you need to. mcs3_container is what you need for the scroll bar.

/*----PART 4----*/ /*----LOCATIONS----*/ echo ' <div class="reserveAPickupAppointmentForm" id="reserveAPickupAppointmentForm4"> <div class = "reserveAPickupAppointmentText"> Please choose from the following locations: </div> <br />'; $sql = " SELECT DISTINCT timeBlocks.location FROM timeBlocks WHERE timeBlocks.school = '".$_SESSION["school"]."' AND timeBlocks.date >= CURDATE() ORDER BY timeBlocks.priority; "; include "databaseConnection.php"; mysql_close($connection); if (mysql_num_rows($result) == 0) { echo 'There are currently no appointments available online. Time blocks for pick ups during move-out week are released after Spring Break, and you can reserve an appointment at that time. If you want to schedule a custom appointment during a different time of the year, please email or call us, and we can help to create a custom pick up.'; } else { echo ' <div id="mcs3_container"> <div class="customScrollBox"> <div class="container"> <div class="content">'; mysql_data_seek($result, 0); while ($row = mysql_fetch_array($result)) { echo ' <div class = "reserveAPickupAppointmentLocationText reserveAPickupAppointmentButtonText">'..$row["location"].'</div> <div class="buttonBreak">&nbsp;</div>'; } echo ' <noscript> <style type="text/css"> #mcs_container .customScrollBox{overflow:auto;} #mcs_container .dragger_container{display:none;} </style> </noscript>'; echo ' </div> </div> <div class="dragger_container"> <div class="dragger"></div> </div> </div> <!-- scroll buttons --> <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>'; } echo ' </div>'; echo ' <script> $(window).load(function() { $("#mcs3_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"fixed","yes","yes",10); }); </script>'; 

Answer 1

After running the mCustomScrollbar plugin, mCustomScrollbar resize event on the window object. You indicate that as soon as you change the size of the view port that it works correctly, it just automatically causes a resize:

 $(window).load(function() { $("#mcs3_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"fixed","yes","yes",10); $(window).trigger('resize'); });