Web iPad app - how to differentiante between one- and two- finger scrolls.

Question

Doing Web app for iPad clients, but need to recognize where user is doing one- and whe two-finger scrolls. Anybody know how to implement it? Any convenient jQuery plug in or something? Thanks.

Answer 1

I'm going to assume that by 'scroll' you mean the panning gesture.

Looking at Handling Events documentation for mobile Safari it would seem that unless the element is scrollable you wont be able to detect any difference using the high-level DOM-events (both the one- and two-finger panning gesture will result in an onscroll event when movement stops).

If, the element is scrollable you'll receive a series of mousewheel events instead.

If you'd be willing to get your hands a little dirty you should have a look at the section called 'Handling Multi-Touch Events'. You could probably achieve what you want by opting-in to receive the more low-level multi-touch events (touchStart, touchMove, touchEnd, touchCancel). The event object passed to the handlers of these events contains a 'touches' property which allows you to look at the position of all "fingertips". That'd propably give you all information you need.

Don't forget to prevent the default behavior though, otherwise you'll still receive the onscroll and/or mousewheel events.

Have a look at the "virtual light table" demo for some inspiration on handling multi touch events in javascript. There's also an excellent article at sitepen.com that you should have a look at.