是否有一个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>
Run Code Online (Sandbox Code Playgroud)
例如,Google Docs就大型文本文档执行此操作.
注意:我正在寻找的东西比无限滚动更复杂.无限滚动只是等待你触及底部,它将加载更多数据,放大滚动条.我正在寻找的东西会让你认为所有数据都已加载,因为滚动条是伪造的.当你触底时,你实际上已经到了我要显示的列表的末尾.
我想创建一个包含大量行的自定义HTML表/列表.我需要行虚拟化,但我不确定实现这一目标的最佳方法是什么.
通过行虚拟化,我指的是表/ ul/div的行根本不可见或呈现的概念,只要它们不滚动到视图中.基本上,重点是如果项目从未显示(滚动后面),则消除渲染.
有任何想法吗?我认为DOM元素一旦"滚动到视图"就需要添加到列表中.然后我需要一个不可见的div与所有行的总高度的高度,以使滚动成为可能.
是否有任何简单的代码示例可以实现此目的?