javascript - touch scroll delta value on iPad - Stack Overflow

admin管理员组

文章数量:1201373

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

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

• javascript
• jquery
• ios

Share Improve this question Follow asked Jan 19, 2012 at 10:58 Caius EugeneCaius Eugene 85544 gold badges1414 silver badges2626 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 23

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

In case that you don't want realtime delta, only press & realease delta you can use:

• touchstart
• touchend
• TouchEvent.changedTouches

Based on @samccone code.

element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchend", touchEnd, false);

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

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

function touchEnd(event) {
  offset = {};

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

  return offset;  
}

本文标签： javascripttouch scroll delta value on iPadStack Overflow