php - 滚动条自动隐藏，除非我调整页面大小

Question

我正在使用 js 插件来创建滚动条。基本上，当您加载页面时，它会在不应该的时候自动将自己设置为“显示:无”。然后，如果你稍微调整浏览器的大小，它就会自动切换到“显示: block ”并正常工作。我终其一生都无法弄清楚哪里出了问题，尤其是因为它是过去两个(不同 ID)正常运行的代码的精确副本。

我相信这是相关代码，但如果您需要，我可以包含其他部分。 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">&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

运行mCustomScrollbar 插件后，在window 对象上触发一个resize 事件。您声明一旦您重新调整视口(viewport)的大小它就可以正常工作，这只是自动触发重新调整大小:

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