除非我调整页面大小,否则滚动条会自动隐藏

时间:2012-02-20 23:49:50

标签: php javascript jquery scrollbar

我正在使用js插件来创建滚动条。基本上,当您加载页面时,它会自动将其自身设置为“display:none”。然后,如果您稍微调整浏览器的大小,它会将自身切换为“display: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>';

1 个答案:

答案 0 :(得分:2)

运行mCustomScrollbar插件后,在resize对象上触发window事件。您声明一旦重新调整视图端口的大小,它就会正常工作,这只会自动触发重新调整大小:

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