Android上的溢出滚动不起作用？

Question

yupp,我是其中一个想要用HTML5开发移动应用程序的人.在Android和iOS上.听起来很疯狂我知道.可悲的是我有问题......

我有一个经典的应用程序,页脚和标题以及应该可滚动的内容.在iOS上这太棒了!页眉和页脚的"位置:固定"到顶部/底部,内容使用原生滚动动量"-webkit-overflow-scrolling:touch;".我知道"-webkit-overflow-scrolling:touch;" 在Android上不可用,但此属性不仅被忽略,滚动根本不起作用!

所以,任何人都可以告诉我如何在iOS上进行"原生"滚动,并在Android上使用相同的标记和样式进行"良好"滚动操作？例如,如果我可以使用具有动量的原生滚动 - 很棒,如果不是 - 纯滚动.

注意:我现在只需支持最新版本(没有Android 2.3!),所以我不想要像iScroll 4这样的JS-Fallback.

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

JSFiddle:http://jsfiddle.net/bmJxN/

谢谢!

Answer 1

很抱歉挖了一个旧帖子,但因为似乎没有令人满意的答案,我想我会为像我这样在这里结束的任何人添加我的2cents.

谈到移动WebApps中滚动的一般问题,移动浏览器上的滚动和动量很痛苦,因为根据平台有各种各样的不同实现:Android浏览器!= Chrome!= Safari!= opera等,以及Android < 3不支持滚动以及更新的版本,就像iOS <5一样.

情况很复杂,对于大多数设备都在iOS 5或6上的iOS来说可能会出现问题,但这是Android碎片的真正问题.

为了更好地掌握这一点,你可以读到这个.

为了回应这个问题,正如您已经指出的那样,有诸如iScroll之类的后备或最近,Overthrow,您可以更好地处理本机实现和JS回退.最近,英国"金融时报"团队发布了看起来很有前景的FTScroller库.

现在针对您的情况,如果您只想支持Android 4+和iOS5 +,您应该能够使用固定定位和

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

在您的可滚动内容上(如果使用auto属性,则不需要指定"overflow-x:hidden").如果没有,你可能在你的固定位置或其他一些css布局属性中犯了错误？(继承了身体道具等).

更新:我应该在发布我的答案之前完成此操作,但我刚刚测试了我的Nexus4上的小提琴并且您的代码在Chrome中运行:这可能意味着您在没有安装Android 4+的旧设备或没有安装的浏览器上进行了测试支持溢出属性？

附注:

• 请注意,虽然在Android和iOS上默认情况下动量效果是活动的,但它将是应用的平台特定动量:它们彼此不同,这与使得滚动动量平台无关的JS polyfill相反.此外,在iOS上,滚动比Android更平滑,即使新设备和Android 4.0+的情况变得更好(在此之前,在大多数人口密集的视图中都很难用).
• 在iOS上,您将拥有本机平台的弹跳效果,但不会在Android上,因为本机浏览器UX不包含此弹跳效果(这很奇怪,因为此效果存在于OS UX的其他部分,例如设置).您可以在Android上使用库来实现这一点,但要注意不可思议的山谷.
• 即使在较新的浏览器上也存在其他问题,例如Android浏览器中没有滚动位置指示器,如下所示:http://barrow.io/overflow-scrolling.在iOS上,如果在" 如何在iOS网络应用程序中禁用橡皮筋？ "中指出,在整个页面上滚动特定元素时,您可能会遇到臭名昭着的"橡皮筋滚动效果"问题.对于WP8 webApps,您将拥有类似的pb.

所有这些都说滚动简单的东西在移动WebApps中远非完美,而且在WebViews性能方面更糟糕(例如在开发PhoneGap应用程序时).祝好运 !