有没有办法在移动浏览器上强制两个手指滚动

Question

我目前正在进行一个项目，其中拖动操作会绘制到画布上，因此单手指滚动是不可行的。我希望能够用两根手指滚动。

在尝试了各种touch-action值后，我发现pinch-zoom让我很接近，但不幸的是，它也会缩放页面。我尝试了各种方法来阻止缩放功能，但它造成了许多问题。我还尝试了使用手势事件进行自定义滚动，但与原生滚动相比，滚动性能非常差。

有没有一种优雅的方法可以在不捏缩放的情况下强制两个手指滚动？

Answer 1

要防止缩放，请使用以下方法：加载项头=>

<meta name='viewport' 
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, 
user-scalable=0' >

同时添加到您的addEventListeners=>函数开始时

e.preventDefault()

将其用于多点触摸检测=>

https://github.com/zlatnaspirala/multi-touch-canvas-handler/blob/master/index.html
This is multi touch handler.  

您需要draw或update func中的某个位置->

if (CONTROL.MULTI_TOUCH_X1 !== 'undefined' && 
CONTROL.MULTI_TOUCH_X2 !== 'undefined'){
// Do it now ... 
}
// Maybe typeof is not needed
if (CONTROL.MULTI_TOUCH_X1 !== 'undefined' && 
typeof CONTROL.MULTI_TOUCH_X2 == 'undefined'){
// Do something to prevent scroll 
// if you need it 
} 

如果您不想使用多点触摸库，请使用以下工具找到第二点触摸：

document.addEventListener("touchstart",
function (event) {
var touch = event.touches[0];
// CONTROL.X = touch.pageX;
// CONTROL.Y = touch.pageY;

var touches_changed = event.changedTouches;
for (var i = 0; i < touches_changed.length; i++) {
if (i == 1) {
...
}
}
}