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:
- 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. - Using
stopPropigation()
. This does not prevent the page from being scrolled. - Using
return false
. This also does not prevent the page from scrolling. - Using 3D CSS transforms to perform the scrolling. Actually, this has potential but also caused some headache-inducing behavior.
- Appending a transparent overlay
div
to hijack the event. Adding thediv
works fine but it doesn't hijack the event.
Is there a way to accomplish what I'm trying to?