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?

Wicker

I think what would fix it would be to test if the page has moved off the screen due to the event and then only prevent default. – Fjeld

How on EARTH do you test for that? – Wicker

Disabling that might confuse people used to that behavior on their phones. Just something to consider. – Rattlebrain

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.

Brittaneybrittani

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/

Bashful

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.

Cottonade

Sadly I already have that and it does not produce the desired result. – Wicker