CODEWITHSUNDEEP
javascriptjqueryiosscrolltouch
beefchimi
beefchimi

Reputation: 1308

JS Touch Events: Y Coordinates greater than Window Height

I'm trying to learn more about touch events, specifically testing in iOS 7. I have forked my work-in-progress to demonstrate the issue I am running into:

(pen no longer available)

The window height is measured on page load and displayed in the "height stat". So, my thinking would be that the max pageY value would be equal to the window height. However, as I scroll the page and initiate a new touch, the pageY coordinates reflect the pixel distance of the entire document, not the window "frame".

This seems to cause incorrect values to be reported. As you continue to move your finger up and down the window, moveY will get stuck between a range of about 10px (startY = 374, moveY stays between 366 and 376). I'm not sure exactly why this happens... but the greater question would be why is pageY not confined to the window frame?

Here is a snippet showing only the touch event captures:

var startY, moveY;

$(window).on('touchstart', function(e) {
    startY = e.originalEvent.targetTouches[0].pageY;
});

$(window).on('touchmove', function(e) {
    moveY = e.originalEvent.targetTouches[0].pageY;
});

$(window).on('touchend', function(e) {
    endY = moveY;
});

Upvotes: 0

Views: 471

Answers (1)

beefchimi
beefchimi

Reputation: 1308

After some more digging, I discovered that there is more than just the page coordinates object. We also have screen and client. From testing, I couldn't tell any difference between screen and page, but client seems to give me exactly what I am after. Example:

e.originalEvent.targetTouches[0].clientY;

...will always give coordinates of the window frame, not the document height. Success!

Upvotes: 1

Related Questions