touch scroll delta value on iPad

Question

Basically we've got a listener on "DOMMouseScroll" that returns the delta on the mouse scroll and in turn use this data to move div elements on our page.

We want to add this functionality to the iPad but are struggling to work out what listeners, are needed to return a touch scroll delta value.

Anyone have any suggestions, or places to start?

Cheers - C

Answer 1

There is no "delta" but you do have access to X and Y.

This mean you can write some code to fire on touch move and calculate the "delta":

element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);

var start = {x:0, y:0};

function touchStart(event) {
  start.x = event.touches[0].pageX;
  start.y = event.touches[0].pageY;
}

function touchMove(event) {
  offset = {};

  offset.x = start.x - event.touches[0].pageX;
  offset.y = start.y - event.touches[0].pageY;

  return offset;  
}

Further reference: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html