How to disable bouncing in html5 fullscreen iphone app?

Question

I want to make html5 fullscreen app. I made a page and added it as an icon to my iphone. I added metatags:

 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <meta name="viewport" content="width=device-width, user-scalable=no" />

What I wanted to achieve is: black status bar on top (this does not work and I do not know why. It is still default status bar...anyone ideas?) without possibility to zoom (like in facebook app) - this works fine.

Now the problem - I can scroll on my iphone even if my app fits on the screen. It bounces back, but I dont want this behavior. I would like to disable that and enable scrolling for a particular div (.ui-content). How can I achieve that?

EDIT: status bar is black now. It changed itself after some time. Was the previous version cached on the iphone or what?

Answer 1

This will prevent scrolling on the whole page

document.ontouchmove = function(e) {e.preventDefault()};

In your case, where you want some divs to be scrollable, and some not to, you should be able to catch the event before it gets to the document

scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};

Answer 2

If your using Cordova 1.7+, open the Cordova.plist file and set the key UIWebViewBounce to NO