jquery动能启用标准垂直触摸刷卡

我使用jquery kinetic有一个平滑的水平div滚动（https://github.com/davetayls/jquery.kinetic）。jquery动能启用标准垂直触摸刷卡

它很好用。但是，在触摸设备上，jquery kinetic禁用正常的垂直滑动/滚动手势。在我看来，没有垂直滚动，你可以在触摸设备上不做任何事情...如果你有一个使用kinetic的全宽度容器，你不能看到容器下面或上面有什么......

如果仅将kinetic设置为水平滚动，则垂直滚动仍然禁用。

有没有一种方法来启用正常的垂直滚动，同时使用动态水平滚动？

对不起，我是英国人，我是法国人。

来源

2013-04-06 lolo

我有类似的问题，但我不想使用插件，因为太多的插件会导致移动设备的巨大不必要的开销。

所以我写了下面的代码 - 请注意我用的

jQuery Mobile的
jQuery的

的jQuery移动可以为您提供以下事件

$("#slider").css("transform","translateX(0px)"); 
$(document).off("touchstart").on('touchstart',touchStartHandler); 
$(document).off("touchmove").on('touchmove',touchMoveHandler); 
$(document).off("touchend").on('touchend',touchEndHandler);

你将需要一些全局变量和一些初始化的将是sl的div ided

function touchStartHandler(event){ 

    touchStart = event.originalEvent.touches[0]; 
    prevTouch = touchStart ; 
    matrix = transMatrixToArray($("#slider").css("transform")); 
    initSliderLeft = parseInt(matrix[4] , 10) ; }; 

function touchMoveHandler(event){ 


     var touch = event.originalEvent.touches[0]; 

     disFromStart = touch.pageX - touchStart.pageX ; 
     var dis = touch.pageX - prevTouch.pageX ; 
     //detecting swipe horizontally , this section should be entered once per swipe 
     if(! isSwiping && Math.abs(disFromStart) > 30 &&(Math.abs(touch.pageY - touchStart.pageY)< 80)){ 
      isSwiping = true ; 
      $("#slider").css("transition-duration", "0s"); 

     } 

     matrix1 = transMatrixToArray($("#slider").css("transform")); 
     curTrans = matrix1[4] ; 


     if(isSwiping && Math.abs(dis) > 0){ 
     event.preventDefault(); 

     $("#slider").css("transform","translateX("+(initSliderLeft + disFromStart )+"px)"); 

     prevTouch = touch ; 
     } } 

function touchEndHandler(event){ 

isSwiping = false ; 
var screenWidth = document.documentElement.clientWidth ; 


if(Math.abs(disFromStart) > (screenWidth /3) && (Math.abs(prevTouch.pageY - touchStart.pageY)< Math.abs(disFromStart)*3)){ 
    if(disFromStart > 0){ 
     currentSubPage++ ; 

    }else{ 
     currentSubPage-- ; 
    } 

} 

$("#slider").css("transition-duration", "0.5s"); 
$("#slider").css("transform","translateX("+(screenWidth * currentSubPage)+"px)"); } 

function transMatrixToArray(matrix) { 
return matrix.substr(7, matrix.length - 8).split(', ');}

在此代码我用CSS3过渡刷卡称为滑块容器DIV这个容器包3全宽子页面

来源

2013-07-12 01:07:05 MolhamStein

jquery动能启用标准垂直触摸刷卡

回答

相关问题