我有一个“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>