用两根手指垂直滚动

Question

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

当尝试用两根手指滚动时，safari 会退出当前选项卡并显示打开的选项卡列表。我可以通过调用取消这种行为preventDefault()上的TouchEvent，如果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/