Android + PhoneGap + jQuery Mobile 上的水平滚动图像

Question

我正在开发一个适用于 Android 和 iPhone 的应用程序。 该应用程序使用 jQuery Mobile 完成并使用 Phonegap 编译。

有时用户可以在应用程序中显示一个图像，该图像非常大，需要可滚动。 我已经完成了一个 javascript 代码，它使用这些 css 属性创建了一个 div 并将其附加到正文：

position: absolute;
width: 100%;
height: 100%;
z-index: 1200;
background-color: black;
overflow: scroll;

在 iPhone 上完美运行，用户可以在右侧滚动任意距离。 在 Android 上则不然，屏幕保持锁定状态，用户只能向下滚动。

index.html页面上的viewport是这样的：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

我花了大约 2 个小时玩它，在互联网上查看，但没有找到任何使屏幕在 Android 上可滚动的东西。

我不能让它成为另一个页面，具有不同的视口，因为我的应用程序是非常深入的 javascripted。而且我无法将用户带回到他想要查看图像时离开的确切位置。

我的想法已经不多了，并且已经测试了几天。有人有什么想法可以帮助我在 android 上制作一个可滚动的弹出窗口吗？

谢谢

Answer 1

要在 Android 的 WebView 中创建可滚动区域，您需要使用模仿原生功能的 JavaScript 框架。有几个不错的：

• iScroll - http://cubiq.org/iscroll-4（我喜欢这个脚本）
• Flexcroll - http://www.hesido.com/web.php?page=customscrollbar
• jQuery Mobile 滚动视图 - http://jquerymobile.com/test/experiments/scrollview/

另外，请注意，低于 5.0 的 iOS 版本并不真正支持可滚动区域（在旧版本中，用户必须使用两根手指才能滚动）。