페이지의 크기를 조정하지 않으면 스크롤 막대가 자동으로 숨김

Question

js 플러그인을 사용하여 스크롤 막대를 만듭니다. 기본적으로 페이지를로드하면 자동으로 "표시 : 없음"으로 설정됩니다. 그런 다음 조금이라도 브라우저의 크기를 조정하면 "display : block"으로 바뀌고 제대로 작동합니다. 나는 내 인생에있어서 무엇이 잘못되었는지를 알아낼 수 없다. 정확하게 작용하는 지난 두 개의 (다른 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'); 
});