Question

是否有一个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>

例如，Google Docs就大型文本文档执行此操作。

注意：我正在寻找的东西比无限滚动更复杂。无限滚动只是等待你触及底部，它将加载更多数据，放大滚动条。我正在寻找的东西会让你认为所有数据都已加载，因为滚动条是伪造的。当你触底时，你实际上已经到了我要显示的列表的末尾。

Answer 1

考虑Clusterize.js

这个插件正是你所要求的。

Answer 2

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

http://www.infinite-scroll.com/

如您所知，我们的想法是确定用户当前可以看到的数据集“多少”，然后执行仅的请求那么多，但设置滚动相对于整套的大小。这样，一旦用户滚过某一点，您就可以请求数据集的下一部分。

ExtJS也将其作为基于组件的框架的一部分。这是a grid example。

Answer 3

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

我看了几个解决方案。

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

保罗·爱尔兰的

无限滚动 [2]也很有趣，但正在解决一个与我需要解决的问题不同的具体问题。

MegaList [3]最接近我想要的。安德鲁（作者）在移动设计方面做得非常出色，有触摸支持等。有一点需要注意的是，它似乎假设了一个严格的选择列表模型并且比我想要的列表组件做得更多一点要做（例如绑定到调整大小事件并尝试自动处理）。

所以我开始编写一个在iOS UITableView之后丢失建模的准系统列表组件 - 并且调用了js-virtual-list-view（vlv :-)。这是一项正在进行中的工作，除非你有类似的需求，否则我不会推荐它。

来源是https://github.com/shyam-habarakada/js-virtual-list-view。

需要贡献者： - ）

[1] http://airbnb.github.io/infinity/

[2] http://www.infinite-scroll.com/

[3] https://github.com/triceam/MegaList

Answer 4

您是否尝试过css中的overflow属性？只需给你的容器div一个标准的宽度和高度，如下所示：

#container {height：500px;宽度：500px; overflow：auto;}

Answer 5

这篇文章涵盖了您的问题，并提供了答案 - http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

不是你所追求的杀手插件，但是要解释你将如何自己创建它。

更新：有一个名为infinity.js的新库，更多信息在这里 - https://stackoverflow.com/a/12108015/921259

Answer 6

您可以考虑使用实际消耗所有数据的Polymer <iron-list>，但它只会将少量节点附加到DOM并处理数据绑定以在用户滚动时显示正确的内容。

我之前使用过它，并且使用2000多个项目的自定义列表（这些项目也是复杂的自定义元素）得到了非常好的结果，无缝滚动。

虽然我自己没有尝试过，但Polymer团队声称它很容易与其他框架混合使用。

https://www.webcomponents.org/element/PolymerElements/iron-list

Answer 7

的确，滚动大型列表时，您将获得性能成本。即使将display:none;或visibility:hidden;设置为在视口上不可见的每个元素，也会有一些滞后，因为滚动列表时仍要重新计算每个元素。

为避免重新计算，应将每个元素移至虚拟DOM，以使其永远不会呈现，并且某些属性（如高度/宽度）将默认为0。

有些库可以处理虚拟滚动，例如Clusterize，ngx-ui-scroll，hyperlist等。

但是其中一些不支持动态行高，一些没有MIT许可，并且有些具有操纵内容列表的小功能。因此，我决定构建一个MVW library来处理this example之类的动态行高。是的，它可以使用scrollTo(index)自动滚动到选定的索引。

实现就像

<div sf-controller="large-list">
  <ul class="sf-virtual-scroll">

    <li sf-repeat-this="x in list">
      {{x.id}}
    </li>

  </ul>
</div>

sf.model.for('large-list', function(self){
  self.list = [];

  for(var i = 0; i < 1000; i++){
    self.list.push({id:i});
  }
});

您可以使用默认数组函数（例如push，splice，pop）来操纵显示的列表。

或try it here

有效地在HTML中显示大型列表

7 个答案: