2016-03-02 89 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;   
     } 
    }