我正在使用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"> </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>';
答案 0 :(得分:2)
运行mCustomScrollbar
插件后,在resize
对象上触发window
事件。您声明一旦重新调整视图端口的大小,它就会正常工作,这只会自动触发重新调整大小:
$(window).load(function() {
$("#mcs3_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"fixed","yes","yes",10);
$(window).trigger('resize');
});