How to get the current position of the scrolling using touchstart and touchend gestures

Ok, I will attempt to explain what I am trying to do as best as I can. Using Webkit-overflow-scrolling I am creating a list that has stackable headers, much like the effect that iPhones contact app gives. E.g. 'A' stays to the top until 'B' moves it out of the way etc. This is relatively easy to do on desktop or while the user is still scrolling. However once the user flicks the scroller, it scrolls by itself with a slow deceleration, no events are fired during this period, until the scroller comes to a complete stop, by then its too late. After much research I see that the flick deceleration duration is always the same (about 2.4 seconds), just the end position changes. I can also see that many people get around this by creating their own library to mimic the iOS behaviour, which may be my only option. I am attempting to work out the scroll top of the element using, as it scrolls by itself, by getting: - Touch start position - Touch end position - The time difference between these two gestures This should allow me to keep track of the position and the end result before it has happened. However I am a bit stuck on how to use this information correctly to get the desired result. Any information or pointers would be extremely helpful. ****************** **EDIT** After getting stuck with physics I asked on [Physics stackexchange]( and received this [answer]( Therefore I believe this code should work. I would like to check to make sure I applying the correct logic to it 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)) Therefore result should equal what scrollTop produces on when the final scroll event is triggered. **************** **EDIT 2** Sadly doesn't seem to work. Therefore I must not be giving the formula that correct information. Not sure if its the position I am picking up or how i am executing the formula. *** **EDIT 3** I think that the scroller velocity does reduce at a factor of 0.95 every 325ms. I have found this information from this useful [article]( >This observation led me to believe that the momentum scrolling is a sort of exponential decay. It is characterized by the speed of the decay. There are two different ways to express it: half-life (remember radioactive decay?) or time constant. For the latter, it is very much related to the step response of a first order system. In other words, the deceleration system is just an overdamped spring-mass system. Turns out, everything is still based on physics. 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); >In fact, this is how the deceleration is implemented in Apple’s own PastryKit library (and now part of iAd). It reduces the scrolling speed by a factor of 0.95 for each animation tick (16.7 msec, targeting 60 fps). This corresponds to a time constant of 325 msec. If you are a math geek, then obviously you realize that the exponential nature of the scroll velocity will yield the exponential decay in the position. With a little bit of scriblling, eventually you find out that 325 is -16.7 / ln(0.95). This [Google Doc]( should show the formulas and hopefully I am doing it correctly. On the left is the standard formula. On the right I have attempted to reduce the velocity by 0.95 (velocity*0.95). I have added real information from my testing to show the problem I am having. If all the equations are correct and it being done the correctly logically way, it must be the data going in. *** **EDIT 4** After many painful hours, I have concluded that this is a bug in webkit for safari mobile. Best option would be to use a JS lib to mimic the effects and wait until the bug is fixed. - Main reason the time it takes to stop always changes, therefore too many variables change for an accurate reading.

以上就是How to get the current position of the scrolling using touchstart and touchend gestures的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准