gpt4 book ai didi

javascript - 防止在带有 Canvas 的页面上的移动设备上滚动

转载 作者:行者123 更新时间:2023-11-30 14:00:41 25 4
gpt4 key购买 nike

我在网上尝试了很多解决方案,但由于某种原因,当我在 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>

在 iOS Safari 上测试。

最佳答案

你找到这篇文章了吗? Disable scroll/swipe action for html canvas drawing on ios

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

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

关于javascript - 防止在带有 Canvas 的页面上的移动设备上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56364845/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com