I am building an infinite scroll component for a web page that needs to work on iPad.
So - when the user scrolls to the bottom of a list, we load more content and display an animated ajax loader image while it's loading.
I have managed to get this to work to a point by using the touchmove event to measure page scroll position and load content when required. But - when we are scrolling the page, any animated gifs (or css animated icons) stop animating (presumably to reduce load on the gpu).
I have however found a way around this - if I create an element with overflow:scroll on it, I can put all my contents in that and emply the same method of measuring position on touchmove but the animated gifs still continue to animate and I can run javascript functions in the background as well.
But - I also want the scrolling region to have the standard iOS momentum/inertia slow down after scrolling. I have managed to achieve this by applying -webkit-overflow-scrolling: touch to the scroll region.
So - to my question - when I release the scroll element and it gradually slows down, I would like to measure the position of the scrolled element as it auto slows down (if that makes sense). I can measure it as I scroll through the use of the "touchmove" event and I can measure it when the momentum comes to a halt but not during the momentum/slow-down bit.
I can run javascript loops/intervals while it is happening but it seems impossible to acually measure the scroll position of the element as it gradually slows down.
Any ideas?
Thanks
