Update dom while scrolling in phonegap app

Question

In a phonegap app that is almost finished, I dynamically insert elements into the dom while scrolling. For this I use the 'touchmove' and 'scroll' callbacks. The problem I'm currently facing, is that the dom only updates after the scrolling has finished. After doing some research, I now think the cause is that phonegap doesn't update the dom after scrolling has finished.

Has any of you faced this problem themselves, and found a solution for it?

Update

The result of my tests was that javascript is not updated at all while scrolling. I would like to know why this is, and what a good way would be to execute javascript and update the dom while scrolling. If you can think of another way to update elements when the viewport is near them, that would also be fine. At the moment everything updates when the user stops scrolling, but if the user doesn't, he meets 'empty' page space.

Request for scroll detection code

This is what I currently use to detect scrolling.

document.addEventListener("touchmove", callback, false); // This works on android, but on iOS the callback is called when scrolling stops. Usually multiple times, because they stack while scrolling and not being executed. I see the event being executed during touchmove, but when the viewport begins moving, the callbacks pause until after the scrolling ends.
document.addEventListener("scroll", callback, false); // This is only executed once, and only when scrolling has fully stopped; the viewport is not moving anymore. On android this is executed all the time during scrolling, which is good.

The combination of updating only during touchmove, and another time when scrolling has stopped would be sufficient. The chance that the user scrolls so fast(after the touchmove) that he meets empty space is very small. The problem is the touchmove event callback is not executed during scrolling.

Answer 1

I would recommend taking a look at iScroll, which can give you a lot of control over user scrolling.

It can register when a user has scrolled to a certain point and then you can execute a function to load more DOM elements, then instantly refresh the scroll to continue the user experience with the updated elements.