stop background of iphone webapp from responding to swipes

Question

I'm making a mobile version of my website, and trying to make it feel as native as possible on the iphone. However, any background areas of the page respond to swiping gestures such that you can shift the page partway off the screen. Specifically, if the user touches and swipes left, for example, the content shifts off the edge of the screen and one can see a gray background 'behind' the page. How can this be prevented? I'd like to have the page itself be 320x480 with scroll-swiping disabled (except on list elements that I choose).

I have added the following meta tags to the top of the page:

<meta name="viewport" content="width=320; height=480; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

I've also tried the following as the event handler for the touchstart, touchmove, and touchend events of the body element:

function cancelTouchEvent(e) {
  if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
  if (e.preventDefault) e.preventDefault();
  return false;
}

It doesn't stop the swiping behavior, but does prevent clicks on all links on the page...

Any help is much appreciated. Thanks!

Answer 1

I had the same problem, but on the iPad, and couldn't find anyone who had been able to solve the problem in the general case, but I believe I have come up with a solution that works.

The solution is (in Javascript) -- document.addEventListener('touchmove', function(e) { if (e.preventDefault) { e.preventDefault(); }});

Simple, no? It works by preventing the default behavior on 'touchmove' events, so the swiping of the background doesn't happen. It doesn't affect the simulated click events.