10

因此，我在移动 safari 中使用这个网络应用程序时遇到了这个有趣的问题，目前我还无法解决。

我有一个单击时出现的“显示：无”菜单 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>
4

1 回答 1

8

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

总之，问题解决了。

于 2012-05-25T16:43:41.407 回答