Запретить прокрутку на мобильном устройстве на странице с холстом

Я пробовал много решений в Интернете, но по какой-то причине эта страница все еще перемещается по вертикали при перемещении моего прикосновения к холсту:

<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 mobile javascript css vertical-scrolling
person Chewie The Chorkie    schedule 29.05.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы уже нашли этот пост? Отключить действие прокрутки/перелистывания для холста html рисование на iOS

Это привело к следующей ссылке. Похоже, есть несколько событий, которые вы должны учитывать. вы также должны ссылаться на свой холст как на элемент dom, чтобы оценить цель

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

person Eddie    schedule 29.05.2019
comment
Спасибо, кажется, что добавление preventDefault к другим сенсорным событиям работает. - person Chewie The Chorkie; 29.05.2019