blocks|key|3005928|text|您可以使用名为"iScroll“的javascript库。它适用于大多数Android设备，并且实现起来并不困难。只需在div元素下面编写var+scrollDiv+=+new+iScroll('divId');即可。这是项目页面：http://cubiq.org/iscroll-4|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3005929|entityMap|0|LINK|mutability|MUTABLE|url|http://cubiq.org/iscroll-4^0|1X|11|38|Q|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

You can use the javascript library called "iScroll". It works with most of Android devices and is not difficult to implement.
Just write <code>var scrollDiv = new iScroll('divId');</code> below the div element.
Here it is the project page: <a href="http://cubiq.org/iscroll-4" rel="nofollow">http://cubiq.org/iscroll-4</a>

blocks|key|3005945|text|我不知道它为什么会起作用，但是在你的风格中添加-webkit-backface-visibility:+hidden就可以解决这个问题了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3005946|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I don't know why it worked, but adding -webkit-backface-visibility: hidden; to your style will fix it

blocks|key|2793438|text|overflow:+auto的问题是/曾经是安卓浏览器中的一个已知问题。在2009年的(see+here)中有一个关于这个问题的报道。我以为他们已经同时解决了这个问题。它被标记为过时的。但人们仍在抱怨它不起作用。如果是这样的话，我怀疑他们不会再修复它了，因为Chrome现在已经成为标准的Android浏览器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2793439|entityMap|0|LINK|mutability|MUTABLE|url|https://code.google.com/p/android/issues/detail?id=2118^0|0|E|17|A|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Problem with <code>overflow: auto</code> is/was a known issue in Android browser.
There was an issue reported on that in 2009 <a href="https://code.google.com/p/android/issues/detail?id=2118" rel="nofollow">(see here)</a>. I thought they had solved it in the meantime. It's marked obsolete. But people are still complaining it does not work. If it is so, I suspect they will not fix it anymore, as Chrome has become a standard Android browser now.

blocks|key|3005983|text|请改用overflow-x和/或overflow-y属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3005984|例如|3005985|overflow-y:+scroll;+/*+allow+vertical+scrolling+*/
-webkit-overflow-scrolling:+touch;+/*+optional+momentum+scrolling+*/|code-block|syntax|javascript|3005986|此外，由于滚动条在触控设备上是隐藏的，所以你可以使用:scroll而不是:auto。它看起来是一样的，但可能不会受到相同的but的影响。|3005987|entityMap^0|3|A|G|A|0|0|0|Q|7|10|5|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

Use <code>overflow-x</code> and/or <code>overflow-y</code> properties instead.

EG 

<pre><code>overflow-y: scroll; /* allow vertical scrolling */
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */
</code></pre>

Also, since scrollbars are hidden on touch devices you can use <code>:scroll</code> rather than <code>:auto</code>. It will look the same but may not be subject to the same bugs.

blocks|key|179518|text|如何尝试将绝对定位的容器中的元素放在新的div中并相对定位呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|179519|<div+class="absolutelyPositionedParent">
++++<div+class="relativelyPositionedElement"></div>
</div>

<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>|code-block|syntax|javascript|179520|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

How about trying to put the elements inside the absolutely positioned container in a new div and position it relatively?

<pre><code>&lt;div class="absolutelyPositionedParent"&gt;
 &lt;div class="relativelyPositionedElement"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;.relativelyPositionedElement{position:relative;overflow:auto;}&lt;/style&gt;
</code></pre>

We have a mobile web app built using JQuery Mobile, PhoneGap and ASP.net MVC.
The app is targeted to run on iOS and Android devices regardless of the browsers. 
We have tested the app on devices listed below and it seems to work fine without any issues

iOS 5 - iPad , iPhone .

Android 4.1.2 - Google Nexus 7, Samsung Galaxy S3, Samsung Galaxy Note 2, Samsung Galaxy Tab 2.

Android 4.0.3 - Asus Transformer Tab

But when tested on Android Stock browser of Samsung Galaxy Note 800 with 4.1.2, we encountered a very strange issue. The elements placed in a div (say child div) with css attribute'overflow:auto' do not respond to any touch events while scroll is enabled. The main thing to note here is that the Parent div containing this div is absolutely positioned 'position:abolute'. After researching over the internet for sometime we found that the combination of absolute position and overflow attributes may cause some issues on Android browser. 

Removing absolute position is not possible at the moment as it is resulting in complete redesign of the layouts and we are left with only few days for the release. So can any one suggest a quick fix for this?

CSS overflow and absolute positioning issue on Android Browser

PhoneGap

Android

容器

我们有一个使用JQuery移动，PhoneGap和ASP.net MVC构建的移动web应用程序。这款应用的目标是在iOS和安卓设备上运行，而不管浏览器是什么。我们已经在下面列出的设备上测试了应用程序，它似乎工作得很好，没有任何问题iOS 5 - iPad，iPhone。安卓4.1.2 -谷歌Nexus7，三星Gala...

问Android浏览器上的CSS溢出和绝对定位问题
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android浏览器上的CSS溢出和绝对定位问题EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android浏览器上的CSS溢出和绝对定位问题
EN