防止在带有画布的页面上在移动设备上滚动

Question

I've tried many solutions online, but for some reason, this page still moves around vertically when moving my touch on the canvas: 我已经在网上尝试了许多解决方案，但是由于某些原因，在画布上移动触摸时，此页面仍会垂直移动：

<html>  
<head>
<style>

html, body {
  overflow-x: hidden;
}

body {
  background-color: lightgray;
  position: relative;
}

body.noScroll { 
  overflow: hidden;
}

</style>
</head>
<body>
        <canvas id="myCanvas" style="touch-action: none;" width="800" height="800"></canvas><br>        

        <script>

            document.body.addEventListener("touchmove", getTouchPos)

            var canvas = document.getElementById('myCanvas')            
            var context = canvas.getContext('2d')   

            context.fillStyle = "#000";
            context.fillRect(0, 0, canvas.width, canvas.height);

            function getTouchPos(evt) {
                evt.preventDefault();
            }

        </script>   
    </body> 
</html>

Tested on iOS Safari. 在iOS Safari上测试。

Answer 1

Have you found this post yet? 你找到这个帖子了吗？ Disable scroll/swipe action for html canvas drawing on ios 在iOS上禁用HTML画布绘制的滚动/滑动动作

It led to the following link. 它导致了以下链接。 Looks like there are multiple events you have to account for. 看来您必须考虑多个事件。 you have to reference your canvas as a dom element as well to evaluate the target 您还必须将画布作为dom元素引用以评估目标

http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html

防止在带有画布的页面上在移动设备上滚动

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-05-29 16:36:20

防止在带有画布的页面上在移动设备上滚动

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-05-29 16:36:20

解决方案1
2 已采纳 2019-05-29 16:36:20