jQuery Mobile - Enable scrolling disable page dragging

Question

I am currently developing an iOS app using phonegap 1.5 and jQuery Mobile.

I understand that we can disable page dragging using the following javascript:

function preventBehavior(e)  
{ 
    e.preventDefault(); 
};

document.addEventListener("touchmove", preventBehavior, false);

However, content scrolling would not work if the above is enabled.

Is there any way I prevent users from dragging the page yet allow scrolling?

I have tried using iScroll. For that I would need to manually do a

scrollbar.refresh(); 

under the pageinit event on every page. Unfortunately, I do have many pages that require scrolling. =(

Are there any other methods which I can use to enable scrolling without using 3rd party plugins?

Answer 1

Add this to HTML head

<script type="text/javascript">
    touchMove = function(event) {
        event.preventDefault();
    }
</script>

then set

ontouchmove="touchMove(event)"

in the outermost div for every page that you want to disable dragging. Example:

<div id="mypage" ontouchmove="touchMove(event)">

Dragging will be possible for pages that don't have ontouchmove="touchMove(event)".

This solution requires that you do not include the phonegap templete code for function preventBehavior(). Remove or comment it out:

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

More detailed info here: http://phonegap.pbworks.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

Answer 2

$(document).delegate('.ui-page', 'touchmove', false);

This is more likely to work, will depend on what you want the touch to be disabled.