用两根手指垂直滚动

Question

我正在开发一个草图 Web 应用程序（使用 Angular），并且由于使用单指手势进行绘制，我希望能够在草图内容中垂直滚动 >用两根手指。

当尝试用两根手指滚动时，Safari 会退出当前选项卡并显示打开的选项卡列表。我可以通过在TouchEvent 上调用preventDefault() 来取消此行为，如果e.touches.length > 1 但（显然）不会滚动内容。当然，我可以实现一个在调用e.preventDefault() 后动态滚动的解决方案，但这有点棘手。

我想知道是否有人知道更简单/更好的解决方案？

谢谢

Answer 1

最后，我实现了一个基于touchmove 和touchstart 事件的基本解决方案。

let lastTouchY;

element.addEventListener('touchstart', (event) =>
{
  if (event.touches.length === 2)
  {
    event.preventDefault();

    lastTouchY = event.touches[0].clientY;
  }
});

element.addEventListener('touchmove', (event) =>
{
  if (event.touches.length === 2)
  {
    event.preventDefault();

    const delta = lastTouchY - event.touches[0].clientY;
    lastTouchY = event.touches[0].clientY;

    element.scrollTop += delta;
  }
});

JSFiddle

https://jsfiddle.net/r7hkmaeo/84/