How to apply row virtualization for a table / list in HTML/CSS/JS? [closed]

Question

I would like to create a custom HTML table/list with a lot of rows. I need row virtualization, but I'm not sure what's the best way to achieve this.

By row virtualization I'm referring to the concept where the rows of the table/ul/div are not visible or rendered at all as long as they are not scrolled into the view. Basically, the point is to eliminate rendering if the item is never shown (behind a scroll).

Any ideas? I think the DOM elements need to be added to the list as soon as they "scroll into view". And then I would need to have an invisible div with the height of total height of all rows to make scrolling possible.

Are there any simple code examples that accomplish this?

Answer 1

I don't know about "simple" code examples but I have found the following projects that use DOM virtualisation

MegaList and SlickGrid

The MegaList example is the easiest to understand as it is just an 'ul' that gets list items added to it.

Answer 2

Infinite Scrolling should get you pointed in the right direction.