Javascript 禁用触摸屏中的水平滚动

首先是一些支持信息： 目前，我正在制作触摸屏导航，类似于iOS facebook应用程序。它需要一个div从屏幕上滑开（几乎完全）。为此，我使用jqueryUI draggable。我的问题出现在div滑开后，但是用户继续水平滑动（div可以移动到陌生的地方）。这就是为什么我决定写一个脚本来完全禁用所有类型的水平滚动（no-CSS-overbox-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();
}
});