加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 16:34:33 所属栏目:资源 来源:网络整理
导读:所以这个我在移动游猎中使用这个网络应用程序的问题,我还没有能够修复. 我有一个“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" 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>

解决方法

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

无论如何,问题解决了.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读