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

Posted

技术标签:

【中文标题】如何从 IOS Safari 中的 touchmove 事件中检测滚动画布【英文标题】:How to detect scrolling canvas from touchmove event in IOS safari 【发布时间】:2017-08-26 12:53:24 【问题描述】:

我正在尝试从 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;
            
        ;

【问题讨论】:

【参考方案1】:

我有一个 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"  ></canvas>  
   </div>

控制器

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

【讨论】:

以上是关于如何从 IOS Safari 中的 touchmove 事件中检测滚动画布的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 SFSafariViewController 从 iOS Safari 应用程序中读取 Cookie

从 IOS 启动 Safari

如何在 iOS 9.3+ 上从网页打开 Safari 的设置

如何从 iOS 应用程序启动 Safari 并打开 URL

如何从 iOS 上的本机 Facebook 应用程序在 Safari 中打开移动 webapp 链接?

如何从 Gmail 应用程序嵌入式 Safari 浏览器在 iOS 上调试“400 错误请求”