Question

我使用jquery kinetic来获得平滑的水平div滚动（https://github.com/davetayls/jquery.kinetic）。

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

如果将动能设置为仅水平滚动，则垂直滚动仍处于禁用状态。

在使用水平滚动和动力学时，有没有办法启用正常的垂直滚动？

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

Answer 1

我遇到了类似的问题，但我不想使用插件，因为太多插件会给移动设备带来巨大的不必要开销。

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

jQuery mobile
的jQuery

jQuery mobile可以为您提供以下活动

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

您将需要一些全局变量和一些将被滑动的div的初始化

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过渡来滑动一个名为slider的容器div 这个容器包装了3个全宽子页面

jquery kinetic启用标准垂直触摸滑动

1 个答案: