yupp，我是这些家伙谁想要开发HTML5的移动应用程序之一。在Android和iOS。听起来很疯狂，我知道了。可悲的是我有一个问题...

yupp, I'm one of these guys who want to develop mobile apps with HTML5. On Android and iOS. Sounds crazy I know. Sadly I have a problem...

我有一个典型的应用有一个页脚和页眉和这应该是滚动的内容。在iOS这个作品太棒了！页眉和页脚都的位置是：固定的顶部/底部和内容的使用与本机的滚动势头-webkit-溢出滚动：触摸;。我知道，-webkit-溢出滚动：触摸;是不是在Android，但该属性不仅忽视，滚动不工作了！

I have a classic app with a footer and header and a content which should be scrollable. On iOS this works fantastic! The header and footer have "position: fixed" to top/bottom and the content uses native scrolling momentum with "-webkit-overflow-scrolling: touch;". I know that "-webkit-overflow-scrolling: touch;" isn't available on Android, but this property is not only ignored, scrolling doesn't work at all!

所以，请谁能告诉我怎么走本土滚动iOS和好的滚动在Android上使用相同的标记语言和样式？例如。如果我可以使用本机滚动动量 - 伟大的，如果不是 - 纯滚动

So please can anyone tell me how to get "native" scrolling on iOS and "good" scrolling on Android with the same markup and style? E.g. if I can use native scrolling with momentum - great, if not - plain scrolling.

注：我只需要支持最新版本了，所以我不希望像iScroll 4 JS-回退

Note: I only need to support recent versions for now (no Android 2.3!), so I don't want JS-Fallbacks like iScroll 4.

.content {
    // no(!) scrolling on Android - why?
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

的jsfiddle： http://jsfiddle.net/bmJxN/

谢谢！

推荐答案

抱歉挖了一个旧的文章，但因为似乎没有令人满意的答案，我想我会加入我的2分钱小费的人结束了在这里和我一样。

Sorry for digging up an old post but as there seem to be no satisfying answer I thought I would add my 2cents for anybody ending up here like me.

谈起滚动移动的WebApp，滚动和放大器的一般问题;在移动浏览器的势头是一种痛苦，因为有各种各样不同的平台上的不同实现的：Android浏览器=铬= Safari浏览器=歌剧等，而Android＆LT;！！！ 3不支持滚动和更新版本，就像iOS的＆LT; 5.

Talking about the general problem of scrolling in mobile WebApps, scrolling & momentum on mobile browsers are a pain as there is a wide variety of different implementations depending on the platform : Android browser != Chrome != Safari != opera etc, and Android < 3 does not support scrolling as well as newer versions, just like iOS < 5.

情况复杂，并可能MOT是为iOS大多数设备都在iOS 5或6中的问题，但它与Android的碎片化的一个现实问题。

The situation is complicated, and may mot be a problem for iOS where most devices are on iOS 5 or 6, but it is a real problem with Android fragmentation.

要获得更好的把握这个，你可以阅读这。

To get a better grasp at this, you could read this.

要回应这一点，因为你已经指出的那样，有回退，如iScroll或最近，打倒你可以处理好本土implems和JS回退。最近，金融时报小组发表的FTScroller库，看起来也很有希望。

To respond to this, as you have already pointed out, there are fallbacks such as iScroll or more recently, Overthrow that you may handle better the native implems and JS fallbacks. More recently, the Financial Times team published the FTScroller library that looks also promising.

现在你的情况，如果你只是想支持Android 4+和安培;的iOS5 +，你应该能够使它只使用固定的位置和动量工作既

Now for your situation, if you only want to support Android 4+ & iOS5+, you should be able to make it work both with momentum using only fixed positioning and

overflow: auto;
-webkit-overflow-scrolling: touch;

在你的滚动内容（你不需要指定溢出-X：隐藏，如果使用自动属性）。如果没有，你可能已经在你的固定或：放置一些其他的CSS布局财产犯了一个错误？ （继承身道具等）。

on your scrollable content (you don't need to specify "overflow-x:hidden" if using auto property). If not, you may have made a mistake in your fixed positing or some other css layout property ? (inherited body props etc).

更新：我要发布我的回答之前已经这样做了，但我只是测试的拨弄我的Nexus4和你的code的确在Chrome的工作：这可能意味着你没有Android的4+或旧的设备上测试用浏览器确实不支持overflow属性？

UPDATE : I should have done this before posting my answer, but I just tested the fiddle on my Nexus4 and your code does work in Chrome : which probably mean that you tested on an older device without Android 4+ or with a browser that did no support the overflow property ?

便笺：

请注意，尽管动量效应便被激活了在Android和放大器; iOS的，那就是将应用于特定于平台的气势：他们从彼此相反的不同给JS polyfill，使滚动的动力与平台无关的。此外，在iOS上，滚动比一个Android更加顺畅，即使一发与较新的设备和Android 4.0+（这是痛苦的无法使用的最厚重的人口观点之前）更好。 在iOS上，您将有反弹的影响，原产于平台上，而不是在Android的原生浏览器UX不包括该回弹效果（这是奇怪的，因为这种影响存在于操作系统UX的其他部分，如设置）。你可以做到这一点在Android上有一个图书馆，但要注意的离奇山谷。 在其他问题存在，甚至在新的浏览器，如没有在Android的浏览器滚动位置指示器作为在此间指出：的 http://barrow.io/overflow-scrolling 。在iOS上，你可以有你的整个页面，同时具有滚动中指出的特定元素内臭名昭著的橡皮筋滚动效果有问题的如何禁用橡皮筋在iOS的Web应用程序？。您将有一个类似的PB为WP8的webapps。 please notice that while the momentum effect is active by default on android & iOS, it's the platform specific momentum that will be applied : they differ from one another, contrary to a JS polyfill that makes scrolling momentum platform-independent. Also, on iOS, scrolling is much smoother than an Android, even though the situation got better with newer devices and Android 4.0+ (it was painfully unusable in most heavy populated views before that). On iOS, you will have the bouncing effect native to the platform, but not on Android as the native browser UX does not include this bouncing effect (which is weird because this effect exists in other parts of the OS UX, such as settings). You could achieve this on Android with a library, but beware of the uncanny valley. Other problems exists even on newer browsers, such as the absence of a scrolling position indicator in Android browsers as pointed out here : http://barrow.io/overflow-scrolling. On iOS, you may have a problem with the infamous "rubber band scrolling effect" on your whole page while having scrolling inside specific elements as pointed out in "How to disable rubber band in iOS web apps?". You will have a similar pb for WP8 webApps.

这一切，说一些简单的滚动远非完美移动的WebApp，而且更糟糕的WebViews的性能代价（开发PhoneGap的应用程序，例如当）。祝你好运！

All this to say that something as simple as scrolling is far from perfect in mobile WebApps, and it's even worse in WebViews performance-wise (when developing PhoneGap apps for example). Good luck !