如何在HTML / CSS / JS中为表/列表应用行虚拟化?

我想创建一个包含很多行的自定义HTML表格/列表。 我需要行虚拟化,但我不确定实现这一目标的最佳方式。

通过行虚拟化,我指的是只要不滚动到视图中,表/ ul / div的行根本不可见或不可见的概念。 基本上,重点在于如果该项目从不显示(滚动后面),则不需要渲染。

有任何想法吗? 我认为只要“滚动查看”,DOM元素就需要添加到列表中。 然后,我需要有一个无形的div与所有行的总高度的高度,使滚动成为可能。

有没有简单的代码实现这个功能?


我不知道“简单”的代码示例,但我发现以下使用DOM虚拟化的项目

MegaList和SlickGrid

MegaList示例最容易理解,因为它仅仅是一个获取列表项目的'ul'。


无限滚动应该让你指向正确的方向。


Wijmo 5 FlexGrid实现了这种行为。 你可以在这里找到一个在线比较

链接地址: http://www.djcxy.com/p/95227.html

上一篇: How to apply row virtualization for a table / list in HTML/CSS/JS?

下一篇: Improving the Performance of Netty Server in JAVA