Javascript 在HTML中高效地显示大列表

是否有一个javascript库可以通过只加载列表的可视部分并伪造滚动条来有效地加载一个巨大的列表

<div id='container'>
  <!-- Empty but height is set to take up space to fake scrollbar -->
  <div id='hidden-before'></div>      

  <!-- Preloaded in case the user scrolls up -->
  <div id='preload-before'></div>

  <!-- User can see this. Height == #container's height -->
  <div id='viewable-section'></div>   

  <!-- Preloaded in case the user scrolls down -->
  <div id='preload-after'></div>

  <!-- Empty but height is set to take up space to fake scrollbar -->
  <div id='hidden-after'></div>       
</div>

例如，谷歌文档（GoogleDocs）就对大型文本文档执行此操作

注意：我要找的比无限卷轴更复杂。无限滚动只是等待你点击底部，它将加载更多的数据，扩大滚动条。我所寻找的会让你认为所有的数据都被加载了，因为滚动条是伪造的。当你到达底部时，你实际上已经到达了我想要显示的列表的末尾。

这是一种称为“无限滚动”的技术，多个库支持它。如果您使用的是jQuery，请查看：

如您所知，其思想是确定用户当前可以看到的数据集的“多少”，然后仅执行该数据集的请求，但根据整个数据集的大小设置滚动。这样，一旦用户滚动超过某个点，您就可以请求数据集的下一部分

---

ExtJS也将此作为其基于组件的框架的一部分。以下是。

您在css中尝试过溢出属性吗？ 只需将容器div设置为标准宽度和高度，如下所示：

#容器{高度：500px；宽度：500px；溢出：自动；}

---

这篇文章涵盖了你的问题并给出了答案-

这不是你想要的杀手级插件，但它能很好地解释你将如何自己创建它

---

更新：这里有一个名为infinity.js的新库，更多信息-

我遇到了类似的问题。场景是，我已经有一个大的（~400+个元素）要显示在一个列表中，其中每个元素都可以有自己的视图。这些元素的DOM的创建、布局和绘制要比我在滚动DIV中呈现整个列表时所需要的慢

我研究了几种解决方案

InfinityJS[1]与我想要的非常接近，只是它要求包含列表项的元素已经添加到DOM中

保罗·爱尔兰（Paul Irish）的《无限卷轴》（infinite scroll）也很有趣，但它解决了一个与我需要解决的问题不同的具体问题

MegaList[3]最接近我想要的。Andrew（作者）在为mobile first设计时做了大量工作，支持触摸等功能。对我来说，一个警告是，它似乎采用了严格的选择列表模型，并且比我希望的列表组件做的要多一些（例如，绑定以调整事件大小并尝试自动处理）

因此，我开始编写一个以iOS UITableView为模型的裸体列表组件，名为js虚拟列表视图（vlv:-）。这是一项正在进行的工作，我不会推荐它，除非你有类似的需求，而这些需求并没有完全满足

这里有消息来源

需要的贡献者：-）

[1]

[2]

[3] 考虑

---

此插件完全按照您的要求执行。

您可以研究使用Polymer的

，它实际上消耗了所有数据，但它只将少数节点附加到DOM并处理数据绑定，以便在用户滚动时显示正确的内容

我以前使用过它，在2000多个项目的自定义列表（这些项目也是复杂的自定义元素）无缝滚动时获得了很好的效果

虽然我自己还没有尝试过，但是Polymer团队声称它可以很容易地与其他框架混合

---

滚动大列表时，确实会有性能成本。即使设置了

display:none或<代码>可见性：隐藏

对于视口中不可见的每个元素，您都会有一些延迟，因为滚动列表时仍在重新计算每个元素

为了避免重新计算，每个元素都应该移动到虚拟DOM中，这样它就永远不会被渲染，并且某些属性（如高度/宽度）将默认为

0

有一些库可以处理虚拟滚动，如、、等

但其中有些不支持动态行高，有些没有麻省理工学院的许可证，有些还有一点操作内容列表的功能。所以我决定构建一个可以处理动态行高度的。是的，它可以使用

滚动到（索引）

自动滚动到所选索引

实现就像

{{x.id}

sf.model.for（'large-list'，函数（self）{
self.list=[]；
对于（变量i=0；i<1000；i++）{
self.list.push（{id:i}）；
}
});

您可以使用默认的数组功能操作显示的列表，如

push

，

splice

，

pop

---

或者

正如@LarryK在他现在删除的回答中所说：“注意，您需要对服务器端应用程序进行更改，以支持来自客户端的分页请求”。@bfavaretto：是的，这一点值得一提。而且，根据页面的复杂性（例如，是否需要动态排序或分组），这可能需要大量的服务器端修改。对不起，我应该说得更清楚。我更新了这个问题，希望能传达出我所寻找的和无限卷轴之间的区别。再一次，Google Docs实现了我想要的功能，你不会将其描述为无限滚动。@jhchen：你看过ExtJS的网格示例吗？这就是你想要的吗？ExtJS的网格正是我想要的！不幸的是，它是GPL3，所以我不能使用它。。。有没有其他选择？你应该考虑把你的清单变小，有没有可以归类的类别？部分加载列表意味着在页面搜索中