Is there a way to force two finger scrolling on mobile browsers?

user_656172 0
Viewed 769

I am currently working on a project where the dragging operation draws onto a canvas and so scrolling is not feasible with a single finger. I would like to be able to scroll using two fingers instead.

Having experimented with various touch-action values I found that pinch-zoom gets me close but unfortunately it also zooms the page. I tried various hacks to prevent the zoom functionality but it caused numerous problems. I also experimented with custom scrolling using the gesture events but the scrolling performance was very poor when compared with native scrolling.

Is there an elegant way to force two finger scrolling without pinch to zoom?

css html javascript
1 Answers

To prevent zoom use this: Add in head =>

<meta name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, 
     user-scalable=0' >

Also add to your addEventListeners => On begin of func.

  e.preventDefault()

Use this for multi touch detect =>

https://github.com/zlatnaspirala/multi-touch-canvas-handler/blob/master/index.html
This is multi touch handler.

You need somewhere in draw or update func ->



if (CONTROL.MULTI_TOUCH_X1 !== 'undefined' && 
    CONTROL.MULTI_TOUCH_X2 !== 'undefined'){

       // Do it now ... 

}

// Maybe typeof is not needed
if (CONTROL.MULTI_TOUCH_X1 !== 'undefined' && 
    typeof CONTROL.MULTI_TOUCH_X2 == 'undefined'){

       // Do something to prevent scroll 
       // if you need it 

}

If you don't want to use multi-touch library then find second touch with:


document.addEventListener("touchstart",
  function (event) {

      var touch = event.touches[0];
      // CONTROL.X = touch.pageX;
      // CONTROL.Y = touch.pageY;
      
      var touches_changed = event.changedTouches;

      for (var i = 0; i < touches_changed.length; i++) {
         if (i == 1) {
           ...
         }
      }

 }
user_15131870
Related