How to get current scroll position using touchstart and touchhend gestures

Ok, I’ll try to explain what I’m trying to do as best as possible.

Using Webkit-overflow Scrolling I am creating a list with glassy headers, similar to the effect that the iPhone contact application gives. For instance. “A” remains at the top until “B” moves it, etc. This is relatively easy to do on the desktop or while the user is still scrolling.

However, as soon as the user clicks the scroller, it scrolls by itself with a slow deceleration, during this period no events are triggered until the scroller stops, by then it is too late.

After much research, I see that the duration of the slowdown is always the same (about 2.4 seconds), only the end position changes. I also see that many people get around this by creating their own library to mimic iOS behavior, which may be my only option.

I am trying to scroll the top element using, as it scrolls by itself, getting:

  • Touch start position
  • Touch end position
  • Time difference between these two gestures

This should allow me to track the position and the end result before this happens. However, I am a little fixated on how to properly use this information to get the desired result. Any information or pointers would be extremely helpful.


EDIT

, , Physics stackexchange

, . , ,

var timeStart = new Date().getTime(); //Triggered on a touchstart event 
var timeEnd = new Date.getTime(); //Triggered on a touchend event 
var startY = event.originalEvent.targetTouches.pageY //Pulled in from different functions containing the events 
var endY = event.originalEvent.changeTouches[0].pageY //The where the touch starts and ends in px 
var timeElasped = timeEnd - timeStart; 
var distance = startY - endY; 
var velocity = distance/timeElasped; 
var result = velocity * (timeElasped - (1/4.8)*(timeElasped*timeElasped))

, , scrollTop, .


2

, , . .

, , , .


3

, 0,95 325 . .

, - . . : ( ?) . . , - spring -mass. , - .

amplitude = initialVelocity * scaleFactor;
step = 0;

ticker = setInterval(function() {
    var delta = amplitude / timeConstant;
    position += delta;
    amplitude -= delta;
    step += 1;
    if (step > 6 * timeConstant) {
        clearInterval(ticker);
    }
}, updateInterval);

, , PastryKit Apples ( iAd). 0,95 (16,7 , 60 ). 325 . , , , , . scriblling, , 325 -16,7/ln (0,95).

Google Doc , , . - . 0,95 ( * 0,95). , , . , .


EDIT 4

, webkit safari mobile. JS lib , .

  • , , , , .
+5

All Articles