4

是的，我是这些想用 HTML5 开发移动应用程序的人之一。在 Android 和 iOS 上。我知道听起来很疯狂。可惜我有问题...

我有一个带有页脚和页眉的经典应用程序以及应该可以滚动的内容。在 iOS 上，这非常棒！页眉和页脚在顶部/底部具有“位置：固定”，并且内容使用带有“-webkit-overflow-scrolling: touch;”的本机滚动动量。我知道“-webkit-overflow-scrolling: touch;” 在 Android 上不可用，但这个属性不仅被忽略，滚动根本不起作用！

所以请谁能告诉我如何在 iOS 上获得“本机”滚动和在 Android 上以相同的标记和样式获得“好”滚动？例如，如果我可以使用具有动量的原生滚动 - 很好，如果不是 - 普通滚动。

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

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

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

谢谢！

4

3 回答 3

7

很抱歉挖了一篇旧帖子，但似乎没有令人满意的答案，我想我会为像我这样最终来到这里的任何人加 2 美分。

谈论移动 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;

在您的可滚动内容上（如果使用自动属性，则无需指定“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 应用程序时）。祝你好运 ！

于 2013-09-17T09:59:11.550 回答
0

由于在其他地方似乎没有正确解释的行为，请在此处添加附加说明。

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

对于一般的页面滚动，这可能不是问题；但是，当用于滚动页面区域（例如全页应用程序）时，用于指示附加内容的滚动条的丢失会带来严重的用户体验问题。

要纠正这个问题，您可以添加自定义滚动条。当使用 '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/

于 2016-02-23T09:17:57.460 回答
-2

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

希望它会有用...

于 2012-12-18T13:26:23.717 回答