Home > Uncategorized > Selectively prevent vertical scrolling in Phonegap app.

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)
{
if (!IsDraggablePage(e))
{
e.preventDefault();
}
}, true);

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.

function IsDraggablePage(e)
{
if($(‘.ui-page-active’).attr(‘draggable’)==”true”)
{
return true;
}
return false;
}

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

This is caused by the UIWebView Bounce feature of iOS, and in order to remove it, then you have to change some of the underlying Cocoa code, namely Classes > AppDelegate.m

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.

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: