[解決済み] ウェブページに左右のスワイプ機能を追加し、上下のスワイプはデフォルトで使用する。

質問

padiliciousを使って、iOSとデスクトップで表示されるウェブページのスワイプジェスチャーを検出しています。私のサイトの前ページと次ページのために左/右にスワイプするのはとてもうまくいきます。しかし、上下にスワイプすると、iPhone/iPadのデフォルトの動作を上書きしてしまうようです。padiliciousを起動していないときは、上下のスワイプでページがスクロールされるようにしてほしいです。ただ、上下スワイプを無視するようなコードではうまくいかないようです。

padiliciousのコードの部分を

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;
    }


}

解決するには？

削除 event.preventDefault(); をすべての関数から削除します。 関数の中で processingRoutine() {} 追加 event.preventDefault(); を入力してください。

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';
    }
}