Question

我正在使用带有缩放缩放选项的div，与angularjs移动应用程序配合使用。它在Android设备上工作正常，但在iPhone（iOS 9）上，我无法移动div来查看隐藏的内容。我可以垂直移动div内容但不能横向移动。我已经搜索了解决方案并实现了样式，

-webkit-overflow-scrolling: touch;
overflow-y: scroll;
overflow-x: scroll;

但我仍然存在同样的问题。对此有什么解决方案吗？

Answer 1

通过触摸事件让它工作。

以下示例代码，

  $( ".pinch" ).on( "touchstart", fingerDown)
                 .on('touchend', fingerUp)
               .on('touchmove', fingerMove)
               .on('touchend', fingerend);


  var startX = 0;
  var endX = 0;
  var lastMargin = 0;
  var leftMargin = 0;

  function fingerend(e){                        
    lastMargin = leftMargin;
    leftMargin = 0;        
  }

  function fingerMove(e){        
    var tempEndX = 0;        
    var tempLeftMargin = 0;
    tempEndX = e.originalEvent.touches[0].pageX;        

    if(startX > tempEndX){
      tempLeftMargin = -(startX - tempEndX);
    }else{
      tempLeftMargin = tempEndX - startX;
    }

    tempLeftMargin = tempLeftMargin + lastMargin;
    var deltaVal = $("#my-div").children().width();
    var minVal = -(deltaVal - 280);
    var maxVal = 10;

    if(tempLeftMargin > minVal && tempLeftMargin < maxVal){
        $("#my-div").children().css({
            "margin-left": tempLeftMargin            
        });

        endX = tempEndX;
        leftMargin = tempLeftMargin; 
    }     
  }

    function fingerDown(e){
      console.log("fingerdown "+e.originalEvent.touches.length);
      var fingersDown = e.originalEvent.touches.length;
      if (fingersDown > 1) {            
        toggleHammerScrolling(true);
      }else{
        startX = e.originalEvent.touches[0].pageX;        
      }
    }

水平滚动在iPhone ios 9中不起作用

1 个答案: