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

Question

我在 angularjs 移动应用程序中使用带捏合缩放选项的 div。它在 android 设备上工作正常，但在 iPhone (iOS 9) 上我无法移动 div 来查看隐藏的内容。我可以垂直移动 div 内容，但不能 horizontally.I 搜索了解决方案并实现了样式，

-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 中不起作用

Horizontal scroll not working in iPhone ios 9

html

iphone

horizontal-scrolling

ios