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.

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?

Thanks

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.

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?

Thanks

• javascript
• html
• mobile
• scroll
• safari

• 4 Can you share a minimal reproducible example? – Joe - Check out my books Commented Jul 10, 2020 at 11:55
• Hi, if you could provide the relevant code, we could be able to help you. Now it is virtually impossible – Chiel Commented Jul 13, 2020 at 11:12

1 Answer 1

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/r7hkmaeo/84/