如何从iOS野生动物园的touchmove事件中检测滚动画布

Question

I am trying to detect scroll canvas from touchmove event its working fine on all except safari browser, In safari pageY, screenY coordinates of touchmove event are not properly working. When I touch and move to down then coordinates (pageY,screenY) value fluctuates, means it's going like 468,473,470,480,477,486,481, It should be consistent, increasing or decreasing so I can detect scroll top or scroll down. please help me out.

$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;
            }
        };

Answer 1

I got a css hack to over come this issue. I have added an overlay to the canvas on touchmove event and then it gets easily scroll.

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>

Controller

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