2017-08-26 7 views
0

touchmoveイベントからスクロールキャンバスを検出しようとしていますが、Safariブラウザ以外のすべてでうまく動作しています。私がタッチして下に移動すると、座標(pageY、screenY)の値が変動し、468,473,470,480,477,486,481のようになります。スクロールトップまたはスクロールダウンを検出できるように、一貫して増減する必要があります。私を助けてください。IOS safariでtouchmoveイベントからスクロールキャンバスを検出する方法

$scope.touchStart = function(e){ 
      var touchevent = e.originalEvent.changedTouches[0]; 
      tempMove = touchevent.screenY; 
} 

$scope.touchMove = function(e) { 
      var touchevent = e.originalEvent.changedTouches[0]; 
      var currentY = touchevent.screenY; 
      if(tempMove == 0){ 
       tempMove = currentY; 
      }else{ 
       var dist = tempMove - currentY; 
       window.parent.postMessage(dist,'*'); 
       tempMove = currentY; 
      } 
     }; 

答えて

0

私はこの問題を解決するためのCSSハックを取得しました。私はtouchmoveイベントでキャンバスにオーバーレイを追加してから、簡単にスクロールします。

HTML

 <div id="overlay" ng-show="doubleTapEvent"> <!-- overlay for scroll --> 
     <div id="text" > <span class="font-size-15-all" >Scroll up or down</span><br> 
     <button class="btn btn_scroll prime_col_white font-size-15-all openSansSemiBold" ng-click="scroll_Off()"> 
      <span>Back to Label Maker</span> 
     </button> 
     </div> 
    </div><!-- end overlay for scroll --> 
    <div class="col-xs-12 col-sm-12 col-md-12 no-padding main_canvas_wrapper" ng-touchmove="touchMove($event)"> 
    <canvas id="canvasArea" width="400" height="400"></canvas> 
    </div> 

コントローラ

 $scope.touchMove = function(e) { 
      e.preventDefault(); 
      var tObj = canvas.getActiveObject(); 
      if(!tObj){ 
       $scope.doubleTapEvent = true; 
      } 
     }; 
     $scope.scroll_Off = function(){ 
      $scope.doubleTapEvent = false; 
     }