Overscroll Problem Phonegap iOS Jquery Mobile

Hi All,

I was working over the project and came across a problem while using the jquerymobile and phonegap for a Hybrid Application.
Whenever the keyboard/picker is displayed on the screen there was a problem of the scroll which made my app look pathetic. So tried to find out the solution which can work over the other platforms also without changing the native code.

By default, the iOS webview have a elastic configuration which means if you drag the screen down, the whole content in the application seems to scroll.
Using phonegap you can either use a plugin like iScroll to overcome the problem or make changes to the custom code to make this work. This goes good for the iOS but what about the other platforms. When we are targeting a Hybrid App it means that the application tends work appropriately on every platform without much of the changes to the native code.

I tried to find out the solution to the problem and ended up finally getting some info from the PHONEGAP site.
I changed the configuration settings of the Phonegap specified in the config.xml which controls the in and out of the application. This can be done by changing the KEYBOARDSHRINKSVIEW property to TRUE.

Config.xml

But using this property has a drawback. Huh! I was stuck again into the problem. This setting goes true for all the screens in the application due to which when my content size tends to increase and keyboard/picker is displayed, my content tends to be hidden below it and i was not able to view it at all.

I started over all again and then came across a solution that helped me solve the problem i was facing.
I used the javascript and some css to make this work. Here is how i did it.

Put this piece of code into the application deviceready function so that it binds the event to every page in the application.


document.body.addEventListener('touchmove',function(e){
if(!$(e.target).hasClass("scrollable")) {
e.preventDefault();
}
else
{
console.log("Scroll");
}
});

Here is the CSS Code that i used:

.scrollable {
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
border:1px solid;
}
.scrollable * {
-webkit-transform: translate3d(0,0,0);
}

Also provide the scrollable class to the content which is required to be scroll in the application.
For example, if you want your content container to scroll then provide the scrollable class to the root element of the application.