My name is Louis Bataillard and I am a freelance web-developer based in Zurich, Switzerland. This blog covers everything related to my work as a web-developer.
You can find my company website at mobweb.ch (it's in German only) or contact me directly at info@mobweb.ch
06.12.2010
When creating an iPhone or iPad application using PhoneGap, I usually try to mimic the behavior of a native application as close as possible. One of the most important thing is to disable the scrolling of the body in the browser window. Even if the current view is not bigger than the screen, the web view allows scrolling. In my opinion, that’s unnecessary and ugly.
Luckily, the scrolling can be disabled using some JavaScript as described here: PhoneGap Wiki: Preventing scrolling on iPhone PhoneGap applications. What this does is it fires a function every time the body is scrolled. This function tells the browser to prevent the default action, which in this case would be scrolling the view. Unfortunately, this doesn’t work when the touching gesture starts on an input or textarea element. When the gesture starts there, the browser never fires the body’s ontouchstart event.
For my current project, an iOS app called “Simple Mail”, the view is exactly the size of the screen, and most of the body is covered with input elements and a texture. If the user starts his touch gesture on either of those elements, he will still be able to scroll
A (partial) solution for this problem I came up with:
However, this is only a partial solution. It works only when the object in question doesn’t already have focus. It doesn’t work when the user first touches the DIV (thus hiding it and focusing the input element) and then starts scrolling. When the input element is already focused and active, there seems to be no way of stopping the user from scrolling the view when starting the gesture on said element.
I put together a class that automates the whole process: First, it looks for every input or textarea element and puts a transparent DIV on top of every one of these elements. Then it binds events to that DIV and the covered elements to handle the showing/hiding of the DIV as well as setting the focus on the input elements
Check out the class here. Just put “covers.addCovers()” in your body’s onload function:
<body onload="covers.addCovers()" ontouchmove="event.preventDefault()">