防止在帶有畫布的頁面上在移動設備上滾動

Question

我已經在網上嘗試了許多解決方案，但是由於某些原因，在畫布上移動觸摸時，此頁面仍會垂直移動：

<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上測試。

Answer 1

你找到這個帖子了嗎？ 在iOS上禁用HTML畫布繪制的滾動/滑動動作

它導致了以下鏈接。 看來您必須考慮多個事件。 您還必須將畫布作為dom元素引用以評估目標

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