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

Viewed 9447

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?

3 Answers
Related