Android + PhoneGap + jQuery Mobile 上的水平滚动图像 [英] Horizontally scrollable image on Android + PhoneGap + jQuery Mobile

问题描述

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

I'm working on an application that will be available for Android and iPhone. The application is done using jQuery Mobile and compiled with Phonegap.

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

Sometimes in the application a user can display an image, this image is very large, and needs to be scrollable. I've done a javascript code that creates a div with theses css properties and appends it to the body:

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

在 iPhone 上它工作得很好，用户可以在右侧滚动到他想要的位置.在 Android 上则不然，屏幕保持锁定状态，用户只能向下滚动.

On iPhone it works perfectly, the user can scroll as far as he wants on the right. On Android it doesn't, the screen stays locked and the user can only scrolldown.

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

The viewport on the index.html page is like this:

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

我花了大约 2 个小时玩它，在互联网上查找，但没有找到任何可以在 Android 上滚动屏幕的内容.

I've spend about 2 hours playing with it, looking on the internet, but didn't find anything that made the screen to be scrollable on Android.

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

I cannot make it be another page, with a different viewport because my application is very deeply javascripted. And I wouldn't be able to bring back the user to the exact spot where he left when he wanted to view the image.

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

I'm running out of ideas, and have been testing it for a few days. Would someone have an idea that would help me to make a scrollable popup on android ?

谢谢

推荐答案

要在 Android 的 WebView 中创建可滚动区域，您将需要使用模仿本机功能的 JavaScript 框架.有几个不错的:

To create scrollable areas in a WebView for Android you will need to use a JavaScript framework that mimics the native functionality. There are several good ones out there:

• iScroll - http://cubiq.org/iscroll-4(我喜欢这个脚本)
• Flexcroll - http://www.hesido.com/web.php?page=自定义滚动条
• jQuery Mobile Scrollview - http://jquerymobile.com/test/experiments/scrollview/

• iScroll - http://cubiq.org/iscroll-4 (I like this script)
• Flexcroll - http://www.hesido.com/web.php?page=customscrollbar
• jQuery Mobile Scrollview - http://jquerymobile.com/test/experiments/scrollview/

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

Also, note that scrollable areas are not really supported in iOS versions less than 5.0 (the user has to use two fingers to scroll in older versions).

这篇关于Android + PhoneGap + jQuery Mobile 上的水平滚动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！