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

Question

我目前正在做一个项目，其中拖动操作绘制到画布上，因此用一根手指滚动是不可行的。我希望能够用两根手指滚动。在尝试了各种touch-action值后，我发现这pinch-zoom让我很接近，但不幸的是它也会缩放页面。我尝试了各种 hack 来阻止缩放功能，但它导致了许多问题。我还尝试使用手势事件进行自定义滚动，但与本机滚动相比，滚动性能非常差。有没有一种优雅的方式来强制两根手指滚动而不用捏合缩放？

Answer 1

为了防止缩放使用这个：添加在 head =>

<meta name='viewport' 

     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, 

     user-scalable=0' >

还要添加到您的 addEventListeners => 在 func 的开头。

  e.preventDefault()

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

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

This is multi touch handler.  

您需要在绘制或更新功能的某个地方->

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

           ...

         }

      }

 }