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

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

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

有没有一种优雅的方式来强制两根手指滚动而不用捏合缩放?


慕田峪4524236
浏览 111回答 1
1回答

拉丁的传说

为了防止缩放使用这个:添加在 head =><meta name='viewport'&nbsp;&nbsp; &nbsp; &nbsp;content='width=device-width, initial-scale=1.0, maximum-scale=1.0,&nbsp;&nbsp; &nbsp; &nbsp;user-scalable=0' >还要添加到您的 addEventListeners => 在 func 的开头。&nbsp; e.preventDefault()将其用于多点触摸检测=>https://github.com/zlatnaspirala/multi-touch-canvas-handler/blob/master/index.htmlThis is multi touch handler.&nbsp;&nbsp;您需要在绘制或更新功能的某个地方->if (CONTROL.MULTI_TOUCH_X1 !== 'undefined' &&&nbsp;&nbsp; &nbsp; CONTROL.MULTI_TOUCH_X2 !== 'undefined'){&nbsp; &nbsp; &nbsp; &nbsp;// Do it now ...&nbsp;}// Maybe typeof is not neededif (CONTROL.MULTI_TOUCH_X1 !== 'undefined' &&&nbsp;&nbsp; &nbsp; typeof CONTROL.MULTI_TOUCH_X2 == 'undefined'){&nbsp; &nbsp; &nbsp; &nbsp;// Do something to prevent scroll&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;// if you need it&nbsp;}&nbsp;如果您不想使用多点触控库,请使用以下方法找到第二个触控点:document.addEventListener("touchstart",&nbsp; function (event) {&nbsp; &nbsp; &nbsp; var touch = event.touches[0];&nbsp; &nbsp; &nbsp; // CONTROL.X = touch.pageX;&nbsp; &nbsp; &nbsp; // CONTROL.Y = touch.pageY;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; var touches_changed = event.changedTouches;&nbsp; &nbsp; &nbsp; for (var i = 0; i < touches_changed.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (i == 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; }&nbsp;}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript