Allow vertical scrolling with touchstart when event.preventDefault enabled

Question

I am currently having an issue in allowing vertical scrolling when event.preventdefault is enabled.

I am trying to add swipe functionality to my mobile page, I have tried may frameworks like hammer.js, swipe.js etc, and all of them require event.preventDefault enabled to detect left and right swipes.

When event.preventDefault is enabled, the swipes detect perfectly, however you lose the ability to vertical scroll when you are on that element. ie you cannot move the screen up or down on a mobile device, when your finger starts on the swipe element.

I have tried building my own little script which works well, but again has the issue of vertical scrolling, that is an issue.

var el = document.getElementById('navigation');
el.ontouchstart = function(e){
        e.preventDefault();
        el.innerHTML = "touch start";
};
el.ontouchend = function(e){
        el.innerHTML = "touch end";
};
el.ontouchmove = function(e){
        el.innerHTML = "touch moved";
};

el.ontouchcancel = function(e){
        el.innerHTML = "touch cancel";
};

Any ideas???

Answer 1

It's a common issue where you want the native browser behaviour to work alongside the interaction behaviour that people come to expect from a touchscreen device.

If you want to use a library you might need to hack it open as you WILL need to prevent the defaults to prevent the page from jumping all over the place when using touch events, but at other times you want to omit it as you want to prevent the page from remaining in a static position, obscuring other content.

Ideally you want add a clause to the handler that instructs them whether or not to prevent the default behaviour the browser executes upon receiving the event.

Swiping for instance, is a behaviour that should occur in a short time frame (if you are taking for instance one whole second in moving your finger from one area to the other instead of, let's say, 120 ms, you're not actually swiping, but dragging. Thinking about time frames may help you here, for instance:

var threshold = 150, interactionStart;

el.ontouchstart = function( e )
{
    // store timestamp of interaction start
    interactionStart = +new Date;
};

el.touchmove = function( e )
{
    // get elapsed time in ms since start
    var delta = +new Date - interactionStart;

    if ( delta > threshold )
    {
        e.preventDefault();
    }
    else {
        // super cool magic here
    }
};

Whether 150 ms is the threshold you want depends on the action, as you see there is no fixed answer for your question as the actual implementation depends on what your application needs in terms of touch interactions.

You could also consider not blocking the events default when the user is scrolling more along the vertical axis (ie compare whether the delta position of the events Y offset (relative to the start Y offset) is larger than the events X offset (relative to the start X offset) to detect whether the users is moving left or right or up or down (for instance if you have a carousel that can swipe horizontally (where the default behaviour is blocked so the page won't move up/down during the horizontal scroll) but want the page to scroll vertically when the user is obviously dragging the page among the vertical axis).

Answer 2

The library jquery.touchSwipe solves that.

The library: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

An example page where swiping and scrolling are combined: http://labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html