In the phonegap application, which is almost finished, I dynamically insert elements into the dom when scrolling. For this, I use the touchmove and scroll callbacks. The problem I'm facing right now is that dom only updates after the scroll completes. After some research, I now think the reason is that the phone delay does not update the dom after the scroll is complete.
Have any of you encountered this problem and found a solution for it?
Update
The result of my tests was that javascript doesn't update at all when scrolling. I would like to know why this is so, and what a good way would be to execute javascript and update dom while scrolling. If you can think of another way to update elements when the viewport is next to them, that would be fine too. At the moment, everything is updated when the user stops scrolling, but if the user does not, he encounters an "empty" page space.
Scroll Detection Code Request
This is what I am currently using to detect scroll.
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 updates only during touchmove, and another time to stop scrolling will be sufficient. The chance that the user scrolls so fast (after touchmove) that he encounters an empty space is very small. The problem is that the touchmove event callback does not execute while scrolling.
source share