Question

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

我的想法是比较手指在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();
}
});

在触摸屏中禁用水平滚动

0 个答案: