Question

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.

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;

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.

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

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

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.

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.

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 ?

Thank you

Answer 1

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 (I like this script)
• Flexcroll – http://www.hesido.com/web.php?page=customscrollbar
• jQuery Mobile Scrollview – http://jquerymobile.com/test/experiments/scrollview/

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).