Selectively prevent vertical scrolling in Phonegap app.
A battle I’ve often fought is the vertical scroll in Phonegap. iOS sees the app as a browser window (UIWebView), and wants to treat it as such, and your clients and users see it as a static app, with fixed navigation elements ontop of scrollable content.
On pages where the content does not need to be scrolled at all then you just need to call preventDefault on touchmove event.
document.addEventListener(‘touchmove’, function (e)
Note, that I have used a function call to “IsDraggablePage”, this method can be used to selectively decide if the page can be scrolled or not. Typically, a page where all the content fits without scrolling, then you can disable scrolling, if the content doesn’t, or may not always fit, then you should enable scrolling.
This function, isDraggablePage, checks an attribute “draggable” of the page, and if it is set to true, then the page can be dragged.
All well and good, until you hit this problem, on a page that needs to be draggable, it appears that the navigation bars can be dragged out of place
Scroll to webViewDidFinishLoad, and enter the following line of code before the return statement:
[[theWebView.subviews objectAtIndex:0] setBounces:NO];
This means that, when you scroll beyond the bounds of the UIWebView, it will not bounce back to position, it will just stop suddenly, leaving your navigation in place.