How to apply row virtualization for a table / list in HTML/CSS/JS?
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?
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.
无限滚动应该让你指向正确的方向。
The Wijmo 5 FlexGrid implements this behavior. You can find an online comparison here
链接地址: http://www.djcxy.com/p/95228.html