我试图从 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;
}
};
我有一个 css hack 来解决这个问题。我在 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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句