ページのサイズを変更しない限り、スクロールバーが自動的に非表示になる

Question

jsプラグインを使用してスクロールバーを作成しています。基本的に、ページを読み込むと、自動的に「表示：なし」に設定されます。次に、少しでもブラウザのサイズを変更すると、 "display：block"に切り替わり、正しく動作します。私は人生の間違っていることを理解することはできません。特に、正常に動作している過去2つの（異なるID）コードの正確な複製であるためです。

これは関連するコードだと思いますが、必要に応じて他の部分も含めることができます。 mcs3_containerはスクロールバーが必要です。あなたがmCustomScrollbarプラグインを実行した後

/*----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

は、windowオブジェクト上resizeイベントをトリガします。あなたはそれが正しく動作するビューポートをサイズに直したら、これはちょうど自動的に再サイズをトリガされると述べている：

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