用两根手指垂直滚动 [英] Scroll vertically with two fingers

问题描述

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

I'm working on a sketch web application (using angular) and, as the one finger gesture is used to draw, I would like to be able to scroll vertically in the sketch content using two fingers.

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

When a try to scroll with two fingers, safari exits the current tab and show the list of opened tabs. I can cancel this behaviour by calling preventDefault() on the TouchEvent if e.touches.length > 1 but (obviously) that doesn't scroll the content. I could, of course, implement a solution that would dynamically scroll after calling e.preventDefault(), but that's a bit tricky.

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

I would like to know if someone knows an easier/better solution?

谢谢

推荐答案

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

Finally, I implement a basic solution based on the touchmove and touchstart events.

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/

这篇关于用两根手指垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！