滚动条自动隐藏，除非我调整页面大小 [英] Scrollbar automatically hidden unless I resize the page

问题描述

我正在使用js插件来创建滚动条.基本上，当您加载页面时，在不应该加载页面时，页面会自动将其自身设置为显示:无".然后，如果您稍微调整浏览器的大小，它就会切换为"display:block"并正常工作.我无法一辈子找出问题所在，尤其是因为它是过去两个(不同ID)的代码的正确复制品，它们正常运行.

I am using a js plugin to create scroll bars. Basically, when you load the page, it automatically sets itself to "display: none" when it shouldn't be. Then, if you resize the browser even a little bit, it switches itself to "display: block" and works correctly. I can't for the life of me figure out what is wrong, especially because it is an exact replica of the code from the past two (different IDs) that are functioning correctly.

我相信这是相关的代码，但是如果需要，我可以包括其他内容. mcs3_container是需要滚动条的地方.

I believe this is the relevant code, but I can include other pieces if you need. mcs3_container is what needs a 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>';

推荐答案

运行mCustomScrollbar插件后，在window对象上触发一个resize事件.您声明一旦重新调整视口的大小即可正常工作，这只会自动触发该调整大小:

After you run the mCustomScrollbar plugin, trigger a resize event on the window object. You state that once you re-size the view-port that it works correctly, this is just automatically triggering that re-size:

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

这篇关于滚动条自动隐藏，除非我调整页面大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！