Я использую js-плагин для создания полос прокрутки. В основном, когда вы загружаете страницу, она автоматически устанавливает себя на «display: none», когда этого не должно быть. Затем, если вы немного измените размер браузера, он переключится на «display: block» и работает правильно. Я не могу за всю жизнь понять, что не так, особенно потому, что это точная копия кода из двух последних (разных идентификаторов), которые работают правильно.
Я считаю, что это соответствующий код, но я могу включить другие части, если вам нужно. mcs3_container – это то, что нужно для полосы прокрутки.
/*----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"> </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>'; После запуска плагина mCustomScrollbar событие resize объекта window . Вы указываете, что как только вы измените размер порта представления, который он работает правильно, это просто автоматически вызывает изменение размера:
$(window).load(function() { $("#mcs3_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"fixed","yes","yes",10); $(window).trigger('resize'); });