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

我想用很多行创建一个自定义的HTML表格/列表。我需要行虚拟化，但我不确定实现这一目标的最佳方式。如何在HTML/CSS/JS中为表/列表应用行虚拟化？

按行虚拟化我指的是表/ ul/div的行根本不可见或呈现的概念，只要它们不滚动到视图中即可。基本上，重点在于如果该项目从不显示（滚动后面），则不需要渲染。

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

是否有任何简单的代码示例来实现这一点？

2012-08-06 Tower

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

的MegaList例子是最容易理解的，因为它只是一个'ul'获取添加到它的列表项。

2012-08-07 07:06:58

Infinite Scrolling应该让你指出正确的方向。

2012-08-07 07:17:36 nathancahill

我想这个和真正的虚拟化之间的区别在于，无限滚动页面在从屏幕滚动时不会从DOM中移除元素。在使用虚拟化时，DOM元素正在被主动添加和删除。 – 2012-08-09 01:41:25

Wijmo 5 FlexGrid实现此行为。你可以找到一个在线比较here

2015-09-15 13:56:22 theboss

回答