Is there a js method to detect when a vertical flick on a long iOS safari page has stopped moving, such as an equivalent to the pseudo:

window.element.momentumScroll == false

This is to detect if the decelerating content is still moving or the scroll event has finished.

Any and all clues gratefully received.

ADDENDUM I have not implemented any external libraries in my code (no jQuery etc) and need to find a native js listener/method to tell me when the flick scroll has ended.

doc.addeventlistener("scroll", function(e){setvariable to 1}, false)

doc.addeventlistener("noscroll", function(e){setvariable to 0}, false)

Is there a js method to detect when a vertical flick on a long iOS safari page has stopped moving, such as an equivalent to the pseudo:

window.element.momentumScroll == false

This is to detect if the decelerating content is still moving or the scroll event has finished.

Any and all clues gratefully received.

ADDENDUM I have not implemented any external libraries in my code (no jQuery etc) and need to find a native js listener/method to tell me when the flick scroll has ended.

doc.addeventlistener("scroll", function(e){setvariable to 1}, false)

doc.addeventlistener("noscroll", function(e){setvariable to 0}, false)

• javascript
• ios
• scroll
• detect

3 Answers 3

Method:

startTop = window.pageYOffset on touchStart

currTop = window.pageYOffset on touchEnd
deltaTop = startTop - currTop
deltaTop == 0 means no momentum scrolling occurred during another event.

I'm not sure if I understood the question correctly. I believe u are trying to achieve something like loading new content when the page reaches its bottom? (forgive me for assuming)

I think you are looking for some javascript gesture library, if your event is based on touches.

There are Mootools library on this Powertools: http://cpojer/PowerTools/#!

Drag.Flick: http://mootools/forge/p/drag_flick

There should be equal implementation in other framework as well. (jQuery: http://jgestures.codeplex./)

Possible solution is to look for an event that can return the current position of touches that exceeds document.body.clientHeight (read: not cross platform) .

Hope I manage to point to the right way.

just do a setTimeout in the touchend event. The timeout will fire once the touchend has stopped working. Timers get paused during touch event. On ios set timeout will fire once the page has stopped scrolling and there is no longer momentum.

body.addeventlistener("ontouchend", function(e){
    setTimeout(function(){
       alert("done moving")
    },0); 
}, false);

or

$('body').on('touchend.scroll', function () { 
    setTimeout(function(){
       alert("done moving")
    },0); 
});

Note that Android will fire the event as soon as you let your finger go. Timers dont seem to be paused.