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?

Solution 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

Solution 2

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

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

Solution 3

I'm using jQuery Mobile and the following (executed on DOM ready) works for me:

$('body').on('touchmove', function(e) {
    e.preventDefault();
});

Note that returning false or calling e.stopPropagation() will cause children of the body to not respond to the 'touchmove' event as well. Perhaps you are doing that in one of your event handlers which is stopping event bubbling.

Comments

[kaleazy]

Seems like a great solution, but has anyone actually gotten this to work? No luck for me.