Question

我正在尝试从touchmove事件中检测滚动画布，除了safari浏览器之外，其他所有工作正常。在safari pageY中，touchmove事件的screenY坐标不正常工作。当我触摸并向下移动时，坐标（pageY，screenY）值会波动，意味着它会像468,473,470,480,477,486,481一样，它应该是一致的，增加或减少所以我可以检测到滚动顶部或向下滚动。请帮帮我。

$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

我有一个css hack来解决这个问题。我在touchmove事件的画布上添加了一个叠加层，然后轻松滚动。

HTML

CREATE OR REPLACE TRIGGER trigger_contact_af_update
AFTER UPDATE
   ON contact
FOR EACH ROW
DECLARE
BEGIN
INSERT INTO contact_log_history
   (org_name,
     action)
select org_name, 'contact_log_history' 
from contact 
END;

控制器

     <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>

如何从IOS safari中的touchmove事件中检测滚动画布

1 个答案: