0

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

它工作得很好。但是，在触摸设备上，jquery 动力学禁用正常的垂直滑动/滚动手势。在我看来，如果没有垂直滚动，您将无法在触摸设备上执行任何操作……如果您有一个使用动力学的全宽容器，您将看不到容器下方或上方的内容……

如果动力学设置为仅水平滚动，垂直滚动仍然是禁用的。

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

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

4

1 回答 1

0

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

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

  • jQuery手机
  • 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 转换来滑动一个名为滑块的容器 div，这个容器包含 3 个全宽子页面

于 2013-07-12T01:07:05.333 回答