17

我们有一个使用 JQuery Mobile、PhoneGap 和 ASP.net MVC 构建的移动 Web 应用程序。该应用程序的目标是在 iOS 和 Android 设备上运行，无论使用何种浏览器。我们已经在下面列出的设备上测试了该应用程序，它似乎可以正常工作，没有任何问题

iOS 5 -iPad、iPhone。

Android 4.1.2 - 谷歌 Nexus 7、三星 Galaxy S3、三星 Galaxy Note 2、三星 Galaxy Tab 2。

Android 4.0.3 - 华硕变压器选项卡

但是在三星 Galaxy Note 800 4.1.2 的Android Stock 浏览器上测试时，我们遇到了一个非常奇怪的问题。启用滚动时，放置在具有 css 属性“ overflow:auto ”的 div（例如子 div）中的元素不会响应任何触摸事件。这里要注意的主要是包含此 div 的 Parent div 绝对定位为' position:abolute '。在网上研究了一段时间后，我们发现绝对位置和溢出属性的组合可能会导致Android浏览器出现一些问题。

目前无法删除绝对位置，因为它会导致布局的完全重新设计，我们只剩下几天的发布时间了。那么任何人都可以建议快速解决这个问题吗？

4

5 回答 5

3

改用overflow-x和/或overflow-y属性。

例如

overflow-y: scroll; /* allow vertical scrolling */
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */

此外，由于滚动条隐藏在触摸设备上，您可以使用:scroll而不是:auto. 它看起来是一样的，但可能不会受到相同的错误的影响。

于 2014-05-28T10:52:48.477 回答
1

问题overflow: auto是/曾经是 Android 浏览器中的一个已知问题。2009 年报告了一个问题（请参阅此处）。我以为他们在此期间已经解决了。它被标记为已过时。但是人们仍然抱怨它不起作用。如果是这样，我怀疑他们不会再修复它了，因为 Chrome 现在已经成为标准的 Android 浏览器。

于 2014-05-22T18:30:50.650 回答
1

我不知道它为什么起作用，但添加 -webkit-backface-visibility: hidden; 你的风格会解决它

于 2013-09-27T14:03:05.777 回答
0

尝试将元素放在绝对定位的容器中的新 div 中并相对定位如何？

<div class="absolutelyPositionedParent">
    <div class="relativelyPositionedElement"></div>
</div>

<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>
于 2014-06-10T10:50:46.127 回答
0

您可以使用名为“iScroll”的 javascript 库。它适用于大多数 Android 设备，并且不难实现。只需写var scrollDiv = new iScroll('divId');在 div 元素下方。这是项目页面：http ://cubiq.org/iscroll-4

于 2013-07-30T08:58:39.980 回答