CODEWITHSUNDEEP
javascripthtmlmobilescrollsafari
user108828
user108828

Reputation: 1949

Scroll vertically with two fingers

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

Upvotes: 8

Views: 2225

Answers (1)

user108828
user108828

Reputation: 1949

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/

Upvotes: 9

Related Questions