22

是否有一个 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 对大文本文档执行此操作。

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

4

7 回答 7

14

考虑Clusterize.js

这个插件完全符合你的要求。

于 2016-03-17T14:42:53.523 回答
4

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

我看了几个解决方案。

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

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

MegaList [3] 最接近我想要的。Andrew（作者）在为移动设备设计它方面做得很好，支持触摸等。对我来说一个警告是它似乎假设了一个严格的选择列表模型并且比我想要的列表组件多一点做（例如绑定以调整事件大小并尝试自动处理）。

所以我开始编写一个以 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

于 2013-07-01T00:22:37.157 回答
4

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

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

如您所知，这个想法是确定用户当前可以看到的数据集的“多少”，然后只执行该数据集的请求，但将滚动设置为与整个集合的大小相关。这样，一旦用户滚动到某个点，您就可以请求数据集的下一部分。

ExtJS 也将此作为其基于组件的框架的一部分。这是一个网格示例。

于 2012-06-12T02:05:35.623 回答
3

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

#container { 高度：500px; 宽度：500px；溢出：自动；}

于 2012-06-12T02:06:11.130 回答
1

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

不是您所追求的杀手级插件，而是在很大程度上解释了您将如何自己创建它。

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

于 2012-08-07T15:24:04.573 回答
1

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

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

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

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

于 2017-08-27T11:15:02.027 回答
1

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

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

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

但是其中一些不支持动态行高，其中一些没有 MIT 许可，并且其中一些具有用于操作内容列表的小功能。所以我决定构建一个可以像这个例子一样处理动态行高的MVW 库。是的，它可以用于自动滚动到选定的索引。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。

或者在这里试试

于 2019-01-22T13:33:50.457 回答