水平可滚动的图像在Android + PhoneGap + jQuery移动

Horizontally scrollable image on Android + PhoneGap + jQuery Mobile

本文关键字：PhoneGap jQuery 移动 Android 滚动 图像 水平      更新时间：2023-09-26

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

有时在应用程序中，用户可以显示图像，该图像非常大，需要可滚动。我写了一段javascript代码，用这些css属性创建了一个div，并将其附加到body:

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上可滚动的东西。

我不能使它成为另一个页面，具有不同的视口，因为我的应用程序是非常深入的javascript。当用户想要查看图像时，我就不能把用户带回到他离开的位置。

我快没主意了，已经测试了几天了。有没有人有一个想法，可以帮助我在android上做一个可滚动的弹出窗口?

谢谢

要在Android的WebView中创建可滚动的区域，你需要使用一个JavaScript框架来模仿原生功能。有几个很好的例子:

  • isroll - http://cubiq.org/iscroll-4(我喜欢这个脚本)
  • flexroll - http://www.hesido.com/web.php?page=customscrollbar
    • jQuery Mobile Scrollview - http://jquerymobile.com/test/experiments/scrollview/

另外，请注意，在ios5.0以下版本中，可滚动区域并不真正支持(在旧版本中，用户必须使用两个手指才能滚动)。

相关文章：