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

很抱歉找到一个旧帖子，但由于似乎没有令人满意的答案，我想我会为像我这样的人来加我的2点。

谈论在移动WebApps中滚动的一般问题，滚动和放大移动浏览器的动力很大，因为根据平台有各种不同的实现：Android浏览器！= Chrome！= Safari！= opera等，以及Android＆lt; 3不支持滚动以及更新的版本，就像iOS＆lt; 5.

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

为了更好地掌握这一点，您可以阅读this。

要回应这个问题，正如您已经指出的那样，有诸如iScroll之类的回退或者最近，Overthrow，您可以更好地处理本机实现和JS回退。最近，英国“金融时报”团队发布了看起来很有希望的FTScroller库。

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

的动量

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

关于可滚动内容（如果使用auto属性，则无需指定“overflow-x：hidden”）。如果没有，你可能在你的固定位置或其他一些css布局属性中犯了错误？（继承了身体道具等）。

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

附注：

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

所有这一切都表明，像滚动这样简单的东西在移动WebApps中远非完美，而且在WebViews性能方面更糟糕（例如在开发PhoneGap应用程序时）。祝你好运！

Answer 2

此处添加附加说明，原因似乎在其他地方似乎没有正确解释。

使用'溢出：自动'或'溢出：滚动'Chrome for Android仅在页面加载时显示滚动条指示符，然后才能隐藏它们（与桌面浏览器的典型行为不同）。复杂的是，这些指标非常薄且半透明，很容易被遗漏。

这可能不是一般页面滚动的问题;但是，当用于滚动页面区域（例如整页应用程序）时，丢失滚动条以指示其他内容会出现严重的UX问题。

要解决此问题，您可以添加自定义滚动条。使用'overflow：auto'时，只有在内容超出可见区域时才会显示这些滚动条（就像在桌面浏览器上一样）。

将以下代码添加到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/

Answer 3

它现在可以使用，原因有很多。您可以做的是使用任何第三方库来完成此任务。我使用了github的一个开源库来获得结果： - 库是here

希望它会有用......

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

3 个答案: