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動能啓用標準垂直觸摸刷卡

回答

相關問題