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

概述所以这个我在移动游猎中使用这个网络应用程序的问题,我还没有能够修复. 我有一个“display：none”菜单div出现在点击上.显示菜单时,div中的内容将按原样显示.问题在于屏幕外的内容.当滚动div内容时,现在在视口内的屏幕外内容根本不会显示,直到滚动完全停止.这不是加载问题,因为所有内容实际上已经加载了,即使向后滚动到顶部,这种情况仍会继续发生. 这不会发生在页面上实际存在的内容,只是隐藏 所以这个我在移动游猎中使用这个网络应用程序的问题,我还没有能够修复.

我有一个“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" ><div ID="menu-item">   <img src="images/menu-account.png" />   <div ID="menu-shadow"></div>   <div ID="menu-item-Title"><div >Account Settings</div></div></div></a><a href="#templates/my-account.PHP" ><div ID="menu-item">   <img src="images/menu-account.png" />   <div ID="menu-shadow"></div>   <div ID="menu-item-Title"><div >Account Settings</div></div></div></a><a href="#templates/my-account.PHP" ><div ID="menu-item">   <img src="images/menu-account.png" />   <div ID="menu-shadow"></div>   <div ID="menu-item-Title"><div >Account Settings</div></div></div></a><a href="#templates/my-account.PHP" ><div ID="menu-item">   <img src="images/menu-account.png" />   <div ID="menu-shadow"></div>   <div ID="menu-item-Title"><div >Account Settings</div></div></div></a></div></div><div ID="wrapper">   <div ></div>   <div >      <div ></div>   </div></div><div ID="btn-menu" ><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>

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

无论如何,问题解决了.

总结

以上是内存溢出为你收集整理的HTML – 有趣的移动safari隐藏内容问题全部内容，希望文章能够帮你解决HTML – 有趣的移动safari隐藏内容问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。