Search code examples
javascripthtmliosswipe

Add swipe left/right to web page, but use default swipe up/down


I'm using padilicious to detect swiping gestures for web pages that will be viewed on iOS and desktops. It works great to swipe left/right for previous and next pages of my site. However, it seems to override the default behavior in iPhone/iPad when swiping up/down. I'd like an up/down swipe to scroll the page, which it does when I don't have padilicious running. Just having the code ignore up/down swipes doesn't seem to work.

The section of padilicious code that I've been

function processingRoutine() {
    var swipedElement = document.getElementById(triggerElementID);
    if ( swipeDirection == 'left' ) {
        document.location = document.getElementById('nextPage').href;
    } else if ( swipeDirection == 'right' ) {
        document.location = document.getElementById('prevPage').href;
    } else if ( swipeDirection == 'up' ) {
        return;
    } else if ( swipeDirection == 'down' ) {
        return;
    }


}

Solution

  • Remove event.preventDefault(); from all functions. In the function processingRoutine() {} add event.preventDefault(); for what you want.

    function processingRoutine() {
        var swipedElement = document.getElementById(triggerElementID);
        if ( swipeDirection == 'left' ) {
            // REPLACE WITH YOUR ROUTINES
            //swipedElement.style.backgroundColor = 'orange';
            event.preventDefault();
        } else if ( swipeDirection == 'right' ) {
            // REPLACE WITH YOUR ROUTINES
            //swipedElement.style.backgroundColor = 'green';
            event.preventDefault();
        } else if ( swipeDirection == 'up' ) {
            // REPLACE WITH YOUR ROUTINES
            //swipedElement.style.backgroundColor = 'maroon';
        } else if ( swipeDirection == 'down' ) {
            // REPLACE WITH YOUR ROUTINES
            //swipedElement.style.backgroundColor = 'purple';
        }
    }