如何为 HTML/CSS/JS 中的表格/列表应用行虚拟化？ [关闭]答案

【问题标题】：How to apply row virtualization for a table / list in HTML/CSS/JS? [closed]如何为 HTML/CSS/JS 中的表格/列表应用行虚拟化？ [关闭]
【发布时间】：2012-08-03 10:39:45
【问题描述】：

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

通过行虚拟化，我指的是 table/ul/div 的行只要不滚动到视图中就根本不可见或不呈现的概念。基本上，关键是如果项目从未显示（在滚动之后），则消除渲染。

有什么想法吗？我认为 DOM 元素一旦“滚动到视图中”就需要添加到列表中。然后我需要一个不可见的 div，其高度为所有行的总高度，以使滚动成为可能。

是否有任何简单的代码示例可以做到这一点？

【问题讨论】：

标签： javascript html dom css

【解决方案1】：

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

MegaList 和 SlickGrid

MegaList 示例最容易理解，因为它只是一个将列表项添加到其中的“ul”。

【讨论】：

【解决方案2】：

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

【讨论】：

我想这与真正的虚拟化之间的区别在于，无限滚动页面在滚动离开屏幕时不会从 DOM 中删除元素。使用虚拟化时，DOM 元素会被主动添加和删除。

【解决方案3】：

Wijmo 5 FlexGrid 实现了这种行为。可以找网上对比here

【讨论】：