How to stop page scrolling while…still allowing scrolling?

Question

I'm making a mobile app with PhoneGap. I've got this--

function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove",preventBehavior, false);

You know how you can drag a page a tiny ways off of the smartphone screen by dragging it, and then it pops right back when you release it? And all you see behind it is black? That's what this code is meant to prevent. And it does.

But it's also preventing all standard scrolling, such as scrolling through a list. Does anyone know a solution?

Answer 1

An easy solution for Cordova 1.7+ Locate Cordova.plist in your Xcode project. At the top it will say “UIWebViewBounce“. Set this to NO.

Answer 2

you have two options:

1. iScroll - Super effective in giving this effect. Granted it does have it's limitations.

2. -webkit-overflow-scrolling:touch; a new css method introduced in ios 5 it works well but again has it's limitations within phonegap.

Personally I use iScroll for phonegap apps, it works great if you don't have a super large list of items you are scrolling. If you're looking for a more native way I would suggest the overflow-scrolling method, this has proven to cause some strange effects in the webview. Phonegap uses webview vs mobile safari so your support differs a bit.

iScroll - http://cubiq.org/iscroll-4 webkit-scrolling - http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/

Answer 3

You should add this in your head tag: (No need of your listener code now)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

This basically disables the scaling (zoom in/out) and that drag effect which you do not want. So the page will not be scrolled but still touchmove event can be tracked.