2016-03-02 43 views
0

我正在使用div与缩放选项,离子与angularjs移动应用程序。它在Android设备上工作正常,但在iPhone(iOS 9)上,我无法移动div以查看隐藏的内容。我能够在垂直方向而不是horizo​​ntally.I've搜索的解决方案并实现了风格移动div内容,水平滚动不适用于iPhone ios 9

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

不过我还是同样的问题。有没有解决方案?

回答

0

了解它通过触摸事件工作。

下面

示例代码,

$(".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;   
     } 
    }