Question

所以我在移动游猎中使用这个网络应用程序时遇到的这个问题我还没有解决过。

点击时出现“display：none”菜单div。显示菜单时，div中的内容将按原样显示。问题在于屏幕外的内容。当滚动div内容时，现在在视口内的屏幕外内容根本不会显示，直到滚动完全停止。这不是加载问题，因为所有内容实际上已经加载了，即使向后滚动到顶部，这种情况仍会继续发生。

这不会发生在页面上实际存在的内容，只是隐藏菜单div中加载的内容。我没有使用任何特殊的编码或任何东西，只是标准的CSS和jquery .click函数。我已经尝试了我能想到的每一种方法来解决这个问题。使用实际页面滚动而不是div中的滚动修复了内容显示问题，但由于某种原因它不会滚动动量而隐藏的div本身需要的时间比应该显示的要长，可能就像2秒当然永远不会没关系。

任何想法如何解决这个问题？

编辑 - 以下代码：

CSS

#menu {
 width:720px;
 height:100%;
 overflow:auto;
 -webkit-overflow-scrolling:touch;
 background-color:#000000;
 display:none;
 position:absolute;
 z-index:9997;
}
#main-menu {
 width:100%;
 display:none;
 background-color:#000000;
}

HTML

<div id="menu">
<div id="main-menu">

<a href="#templates/my-account.php" class="close">
<div id="menu-item">
   <img src="images/menu-account.png" />
   <div id="menu-shadow"></div>
   <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div>
</div>
</a>

<a href="#templates/my-account.php" class="close">
<div id="menu-item">
   <img src="images/menu-account.png" />
   <div id="menu-shadow"></div>
   <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div>
</div>
</a>

<a href="#templates/my-account.php" class="close">
<div id="menu-item">
   <img src="images/menu-account.png" />
   <div id="menu-shadow"></div>
   <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div>
</div>
</a>

<a href="#templates/my-account.php" class="close">
<div id="menu-item">
   <img src="images/menu-account.png" />
   <div id="menu-shadow"></div>
   <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div>
</div>
</a>

</div>
</div>

<div id="wrapper">
   <div class="content-loading"></div>
   <div class="contentarea">
      <div class="content pageURL"></div>
   </div>
</div>

<div id="btn-menu" class="bar-button"><img src="images/bar-btn-menu.png" /></div>

JQuery

<script type="text/javascript">
$('#btn-menu').click(function(){
    $("#menu").show();
    $("#main-menu").show();
    $("#bottom-bar-close").show();
});
</script>

Answer 1

想出来，这是一个小学生的错误，但它确实引起了一个非常烦人的问题。主菜单div未设置为“position：relative;”由于某种原因导致所有屏幕外内容仅在视口内进行渲染并且滚动完全停止。这不会发生在桌面浏览器中，这就是为什么它长时间发现问题的原因，如果我因为某些原因没有在另一页上的div上设置相对位置，我甚至不会遇到解决方案。

无论如何，问题解决了。

有趣的移动safari隐藏内容问题

1 个答案: