向左/向右滑动网页，但使用默认向上/向下滑动

Question

我使用padilicious来检测将在iOS和桌面上查看的网页的滑动手势。对于我网站上一页和下一页的左/右滑动效果很好。但是，在向上/向下滑动时，它似乎会覆盖iPhone/iPad中的默认行为。我想要一个向上/向下滑动来滚动页面，当我没有跑步时，它会这样做。只是让代码忽略向上/向下滑动似乎不起作用。

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


} 

Answer 1

从所有功能中删除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'; 
    } 
} 

Answer 2

我不熟悉padilicious，但检查，看看是否ontouchmove="BlockMove(event);"设置任何地方，像你描述的是防止页面滚动距离，我不知道如何让它保持垂直滚动，但水平滑动。

编辑：我因为找到了做“原生”的感觉的iOS网络应用程序真正有用的概述，它可能不是正是你要找的，但可以为您提供的方法另一种途径来你问题。检查出来：http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Answer 3

有一个jQuery库，它做工作（通过不提供向上/向下方法）：http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

Answer 4

Padilicious似乎要防止默认在所有情况下。在所有情况下查看对event.preventDefault（）的调用。

function touchStart(event,passedName) { 
    // disable the standard ability to select the touched object 
    event.preventDefault(); 

您将不得不改变启动，停止，...处理程序不要在up和down情况下调用preventDefault（）。

Answer 5

我改剧本，这部作品：

// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT 
// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM 

// this script can be used with one or more page elements to perform actions based on them being swiped with a single finger 

var triggerElementID = null; // this variable is used to identity the triggering element 
var fingerCount = 0; 
var startX = 0; 
var startY = 0; 
var curX = 0; 
var curY = 0; 
var deltaX = 0; 
var deltaY = 0; 
var horzDiff = 0; 
var vertDiff = 0; 
var minLength = 72; // the shortest distance the user may swipe 
var swipeLength = 0; 
var swipeAngle = null; 
var swipeDirection = null; 

// The 4 Touch Event Handlers 

// NOTE: the touchStart handler should also receive the ID of the triggering element 
// make sure its ID is passed in the event call placed in the element declaration, like: 
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);"> 

function touchStart(event,passedName) { 
    // disable the standard ability to select the touched object 
    //event.preventDefault(); 
    // get the total number of fingers touching the screen 
    fingerCount = event.touches.length; 
    // since we're looking for a swipe (single finger) and not a gesture (multiple fingers), 
    // check that only one finger was used 
    if (fingerCount == 1) { 
     // get the coordinates of the touch 
     startX = event.touches[0].pageX; 
     startY = event.touches[0].pageY; 
     // store the triggering element ID 
     triggerElementID = passedName; 
    } else { 
     // more than one finger touched so cancel 
     touchCancel(event); 
    } 
} 

function touchMove(event) { 
    //event.preventDefault(); 
    if (event.touches.length == 1) { 
     curX = event.touches[0].pageX; 
     curY = event.touches[0].pageY; 
    } else { 
     touchCancel(event); 
    } 
} 

function touchEnd(event) { 
    //event.preventDefault(); 
    // check to see if more than one finger was used and that there is an ending coordinate 
    if (fingerCount == 1 && curX != 0) { 
     // use the Distance Formula to determine the length of the swipe 
     swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2))); 
     // if the user swiped more than the minimum length, perform the appropriate action 
     if (swipeLength >= minLength) { 
      caluculateAngle(); 
      determineSwipeDirection(); 
      processingRoutine(); 
      touchCancel(event); // reset the variables 
     } else { 
      touchCancel(event); 
     } 
    } else { 
     touchCancel(event); 
    } 
} 

function touchCancel(event) { 
    // reset the variables back to default values 
    fingerCount = 0; 
    startX = 0; 
    startY = 0; 
    curX = 0; 
    curY = 0; 
    deltaX = 0; 
    deltaY = 0; 
    horzDiff = 0; 
    vertDiff = 0; 
    swipeLength = 0; 
    swipeAngle = null; 
    swipeDirection = null; 
    triggerElementID = null; 
} 

function caluculateAngle() { 
    var X = startX-curX; 
    var Y = curY-startY; 
    var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels 
    var r = Math.atan2(Y,X); //angle in radians (Cartesian system) 
    swipeAngle = Math.round(r*180/Math.PI); //angle in degrees 
    if (swipeAngle < 0) { swipeAngle = 360 - Math.abs(swipeAngle); } 
} 

function determineSwipeDirection() { 
    if ((swipeAngle <= 45) && (swipeAngle >= 0)) { 
     swipeDirection = 'left'; 
    } else if ((swipeAngle <= 360) && (swipeAngle >= 315)) { 
     swipeDirection = 'left'; 
    } else if ((swipeAngle >= 135) && (swipeAngle <= 225)) { 
     swipeDirection = 'right'; 
    } 

    /* else if ((swipeAngle > 45) && (swipeAngle < 135)) { 
     swipeDirection = 'down'; 
    } else { 
     swipeDirection = 'up'; 
    }*/ 
} 

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

    /*else if (swipeDirection == 'up') { 
     // REPLACE WITH YOUR ROUTINES 
     swipedElement.style.backgroundColor = 'maroon'; 
    } else if (swipeDirection == 'down') { 
     // REPLACE WITH YOUR ROUTINES 
     swipedElement.style.backgroundColor = 'purple'; 
    }*/ 
}