Virtual list with dynamic elements


I am wondering what would be the best way to create a virtual list with dynamic elements of which I don’t know what their height will be until I put them in the DOM. I know that I can set a function to calculate the height of an element, but what would be an efficient way to do that?


The best way of course is height function where you need to return element height. But if you don’t know it then it is a bit tricky. Then I suggest logic should be the following: after VL elements inserted you get the DOM element height and save it in some cache object/array, and trigger VL to rerender list, and inside of its height function you return that value from cache


This seems to work for the initial items, but as soon as I append more items, the list starts to jump and skips elements. Is this a bug or is the virtual list behaving differently when appending items?

Edit: Seems like its not a problem of the append function, but of long lists. Somewhere around the 15th element the list starts skipping elements, even if I put 20 items in the list at init time.


I am facing same problem. But how to trigger vl to rerender list? Will that cause double refresh?