CODEWITHSUNDEEP
javascriptioshtml
Philipp Br
Philipp Br

Reputation: 113

JavaScript - Scroll with two or more fingers

I'm working on a Web App with touch support. On IOS I use the "gesturestart" and the "gesturechange" event for touch gesture recognition. But I cant find any documentation for this events. Does anyone know if there is any event for scrolling with two or more fingers?

Upvotes: 0

Views: 3234

Answers (1)

Patrick Murphy
Patrick Murphy

Reputation: 2329

How I did it:

To achieve this without using third party frameworks, Use the event.pointers property to know how many fingers or pointers are being used: I put it in GestureChange in case someone adds a third finger after starting.

Note: Some sites also show a event.touches array, that might be what is required for fingers not mouses

The code:

dom.addEventListener("gesturechange", gestureChange, false);

function gestureChange(e) {
    // use the .length to count the amount of event.pointers
    if(e.pointers.length >= 2){
       // scroll with 2 or more
    }
}

Notes:

The event object returned on gestureChange should look like this: (I used a mouse to generate this so only one touch event and not fingers!) 

Object { 
   pointers: Array[1], 
   changedPointers: Array[1],
   pointerType: "mouse",
   srcEvent: mousemove,
   isFirst: false,
   isFinal: false,
   eventType: 2,
   center: {x: 1211, y: 332},
   timeStamp: 1435678852765, 
   deltaTime: 22,
   angle:-11.003540851749504 
... more
}

Upvotes: 1

Related Questions