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

我在网上尝试了很多解决方案，但由于某种原因，在画布上移动我的触摸时，这个页面仍然垂直移动：

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

在 iOS Safari 上测试。

你找到这篇文章了吗？禁用 ios 上 html 画布绘图的滚动/滑动操作

它导致了以下链接。看起来您必须考虑多个事件。您还必须将画布引用为 DOM 元素以评估目标

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

相关内容

最新更新

热门标签：