How to control mobile browser scroll behavior with jQuery?

Question

I am working up a gallery that uses swipeleft and swiperight gestures to switch the object on a touch device. I need to disable page scrolling when it appears that the user is trying to swipe and enable page scrolling when it becomes clear that that is what the user wishes.

Disabling page scroll to allow for a better swiping experience is fairly simple. I just use preventDefault() and store the coordinates for future use:

this.touchMove = function( event )
{
    event.preventDefault();

    this.finalCoord.x = event.targetTouches[0].pageX;
    this.finalCoord.y = event.targetTouches[0].pageY;

};

The problem is being able to reengage the scroll when the user passes certain tolerances. The key difficulty is doing this DURING the same touch event.

This is the closest I've come to making it work, but it results in jerky scrolling and (potentially) blocks the user from being able to view the URL bar:

this.touchMove = function( event )
{
    event.preventDefault();

    this.finalCoord.x = event.targetTouches[0].pageX;
    this.finalCoord.y = event.targetTouches[0].pageY;

    var changeY = this.originalCoord.y - this.finalCoord.y;

    if (changeY > this.config.threshold.y || changeY < ( this.config.threshold.y * -1 ) )
    {
        var move = window.pageYOffset + changeY;

        window.scrollTo( 0, move );
    }
};

Things I've tried that haven't worked:

1. Conditionally calling preventDefault() . This was the most obvious but unfortunately once preventDefault is called there doesn't seem to be a way to negate it.
2. Using stopPropigation() . This does not prevent the page from being scrolled.
3. Using return false . This also does not prevent the page from scrolling.
4. Using 3D CSS transforms to perform the scrolling. Actually, this has potential but also caused some headache-inducing behavior.
5. Appending a transparent overlay div to hijack the event. Adding the div works fine but it doesn't hijack the event.

Is there a way to accomplish what I'm trying to?

Answer 1

I found the touchSwipe plugin via this comment on another question . From looking through that code it seems that it is a logic issue with the way I was trying to apply preventDefault() .

In any case, the plugin works perfectly for my needs.