How tp prevent iPhone webapp from scrolling main window

How tp prevent iPhone webapp from scrolling main window

I am using JQuery Mobile 1.2.0 and testing it out. So far it works fine on my iPhone 4S.

I have one problem with webapps and that is, that they look too much like webapps. What I mean is, that if you drag the page down, the whole page, header and all move down exposing a grey background. The same thing happens when you drag the whole page up. Below the footer is a grey area exposed. See images below with the grey area pointed to by the arrow.

Also a scrollbar appears on the right.

Top area:



Bottom Area:


I have also added the data-position="fixed" for my header and footer to avoid them following the content. This is to make it look more like a native app by keeping the footer at the bottom instead of the middle.

So is there any sample code and/or attributes in JQuery mobile that can prevent this ugly "scrolling" effect while still allowing central content area to be scrolled a-la-native apps?

What I want to happen is that if I should be able to scroll the central content area (if there is a lot of data there) using touch and when the top item is reached, if I continue scrolling down, the whole page should not move and expose that grey area. Same with scrolling up.

And this should work in Jquery Mobile.

Any ideas/links?