溢出滚动Android上不起作用？(Overflow Scrolling on Android do

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

我有一个经典的应用与页脚和页眉和这应该是滚动的内容。在iOS这个作品太棒了！页眉和页脚具有“位置是：固定”到顶部/底部和内容使用与天然滚动动量“-webkit溢出滚动：触摸;”。我知道，“-webkit-溢出滚动：触摸;” 是不是可以在Android，但该属性不仅忽视，滚动不工作了！

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

注：我只需要支持最新版本现在（没有的Android 2.3！），所以我不想JS-回退样iScroll 4。

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

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

谢谢！

Answer 1:

对不起，挖了一个老的文章，但因为似乎没有令人满意的答案，我想我要补充我的2分钱小费的人结束了在这里和我一样。

谈到滚动移动的WebApp，滚动和气势上的移动浏览器是因为有各种不同平台上的不同实现的疼痛一般问题：！！！Android浏览器=铬= Safari浏览器=歌剧等，和Android < 3不支持滚动以及较新版本，就像的iOS <5。

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

为了得到这个更好的把握，你能读懂这个。

为了应对这一点，因为你已经指出的那样，有回退，如iScroll或最近推翻，你可以更好地处理本地implems和JS回退。最近，金融时报公布球队的FTScroller库，看起来也很有希望。

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

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

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

更新：我应该张贴我回答这样做过，但我只是测试了小提琴我Nexus4和你的代码在Chrome中的工作：这可能意味着你的旧设备上测试没有Android 4+或用浏览器做了没有支持overflow属性？

旁注：

请注意，尽管动量效应是默认情况下，Android和iOS的活跃，那就是将应用于特定于平台的势头：他们彼此相反，一个JS填充工具，使滚动势头平台无关的不同。此外，在iOS上，滚动比一个Android更加顺畅，即使一发新型设备和Android 4.0+（这是痛苦的无法使用在大多数人口沉重的意见之前）更好。
在iOS上，您将有反弹影响，原产于平台，而不是在Android的原生浏览器UX不包括该弹跳效果（因为这种效应在OS UX的其他部分，如设置存在，这是奇怪）。你可以用库在Android上实现这一目标，但恐怖谷的提防。
甚至存在了新版浏览器，如没有在Android浏览器滚动位置指示器这里指出的其他问题： http://barrow.io/overflow-scrolling 。在iOS上，你可能有同时具有如指出的特定元素内滚动臭名昭著你的整个页的“橡皮筋滚动效应”问题“ 如何在iOS的Web应用程序禁用橡皮筋？ ”。您将有WP8的webapps类似的PB。

所有这一切说，作为滚动简单的东西是远远不够完善移动的WebApp，并且它甚至在网页视图性能方面更差（开发PhoneGap的应用程序，例如当）。祝好运！

Answer 2:

在这里添加附加的注释由于行为似乎并没有在其他地方得到适当的解释。

当使用“溢出：汽车”或“溢出：滚动” Android版Chrome浏览显示滚动条指标只是暂时在页面加载hidding他们（不像桌面浏览器的典型行为）前。为了复合事项这些指标是如此之薄透亮他们很容易被错过。

这可能不是一般的页面滚动的问题; 然而，用来滚动页面的区域（如整页的应用程序）时滚动条的损失，表明额外的内容提出了一个严重的问题UX。

为了纠正这一点，你可以添加自定义滚动条。当使用“溢出：汽车”当其含量超过可视区域，这些滚动条将只显示（就像在桌面浏览器）。

下面的代码添加到您的CSS：

::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

::-webkit-scrollbar {
  width: 12px;
  background-color: rgba(0,0,0,0);
}

::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #F5F5F5;
  -webkit-border-radius: 100px;
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0,0,0,0.61);
  -webkit-border-radius: 100px;
}

您也可以通过下面的代码添加垂直箭头。同样水平箭头可以通过交换垂直于水平被包括在内。

::-webkit-scrollbar-button {
  width: 12px;
  height: 12px;
  background-color: #F5F5F5;
  background-size: 100%;
}

::-webkit-scrollbar-button:vertical:increment {
  background-image: url('../images/arrows/arrow-down.png');
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image: url('../images/arrows/arrow-up.png');
}

注意最后两行需要箭头图像是存在，但无法将这些添加到帖子中（可能是由于它们的小尺寸）。

其他的滚动条属性也可以定制。下面指导提供了详细的解释：

http://poselab.com/en/custom-scrollbars-in-webkit/