2

首先是一些支持信息：目前我正在制作触摸屏导航，类似于 iOS facebook 应用程序。它需要一个 div 从屏幕上滑开（几乎完全）。为此，我使用可拖动的 jqueryUI。我的问题是当 div 被滑走时出现，但用户继续水平滑动（div 可以移动到奇怪的地方）。这就是为什么我决定编写一个脚本来完全禁用各种水平滚动（没有 CSS overflox-x:hidden 没有帮助）。

我的想法是比较手指在 X 轴和 Y 轴上的速度。你可以在下面看到我的代码。当它归结为纯粹的水平滚动时，这很好用，但在做一些对角线移动时会中断。任何人都知道如何在不完全禁用到处滚动的情况下阻止这种对角滚动。

var t1,sX,sY;//vars for the initial touch start time and position

$(window).bind('touchstart',function(e){
    dateX = new Date();//time at start
    t1 = dateX.getTime();

    sX = event.changedTouches[0].clientX;//starting x coordinates
    sY = event.changedTouches[0].clientY;//starting y coordinates
});

$(window).bind('touchmove',function(e){
    dateX = new Date();//get current x time
    var t2 = dateX.getTime();

    var T = t2 - t1;//substract initial from it

    var s1X = Math.abs( event.changedTouches[0].clientX - sX);//get current x coordinates and substract initial from them
    var s1Y = Math.abs( event.changedTouches[0].clientY - sY);//get current y coordinates and substract initial from them

//speed of finger in px/ms
     var X=Math.abs(s1X/T);
     var Y=Math.abs(s1Y/T);

//absolute value of the speeds and if moving horizontally, dont scroll

if(X>Y){
    e.preventDefault();
}
});
4

0 回答 0