Chrome的移动忽略溢出 [英] Chrome mobile ignoring overflow
问题描述
我与创造的android web应用程序玩耍。我一直在使用PhoneGap的与JQM，但我已经达到了一个问题。
I'm playing around with creating a webapp for android. I've been using phonegap with JQM, but I've reached a problem.
我采取一个滑出式菜单，为此，我发现在互联网上一个简单的例子。
I'm implementing a slide-in menu, and for that I've found a simple example on the internet.
http://www.aldomatic.com/jqm/fb-menu-style /
这简单的菜单从左侧的幻灯片，而该部分的伟大工程，但是当我尝试滑动在我得到的一个问题。整个页面滚动，这就是尽管有我
This simple menu slides in from the left, and that part works great, but when i try to slide it in i get a problem. The whole page scrolls, and this is despite me having
#mobileViewport {
overflow: hidden;
}
（body标签有 mobileViewport
我曾尝试将它添加到html标记过，但都无济于事。
I have tried adding it to the html tag too, but to no avail.
这是一个错误吗？和有没有解决办法？
Is this a bug? and is there any workaround?
推荐答案
默认情况下，JQM页面定位其包含元素的流之外的绝对，（如果包含的元素都是静态定位）
By default, JQM pages are positioned absolutely, outside of the flow of their containing element (if the containing element is statically positioned).
添加溢出：隐藏上包含的元素（体），因此不会帮助
Adding overflow:hidden on the containing element (body) is therefore not going to help.
如果你申请的位置是：相对到 #mobileViewport 应该引起JQM移动网页到现在正确地从流包含元素和溢出：隐藏应该工作
If you apply position:relative to #mobileViewport that should cause the JQM mobile pages to now flow correctly from the containing element and the overflow:hidden should work.
不过，我怀疑这可能不是一个好主意，势必引起其他CSS显示问题。 （我记得玩弄自己那一次，有其他问题的副作用）
However, I suspect that is probably not a good idea and bound to cause other CSS display issues. (I recall playing around with that myself one time and having other issues as a side-effect)
可能是一个更好的主意是添加溢出：隐藏到JQM页面元素本身
Probably a better idea is adding the overflow:hidden to the JQM page elements themselves.
<body class="ui-mobile-viewport">
<div id="mypage" data-role="page" class="ui-page">
...
</div>
</div>
#mypage {
overflow:hidden;
}
请注意：如果你有一个页脚，您可能希望在溢出适用于：隐藏孩子的.ui含量元素来代替。
NOTE: If you have a footer, you might want to apply the overflow:hidden to the child .ui-content element instead.
这篇关于Chrome的移动忽略溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
