相关疑难解决方法(0)

有效地在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>
Run Code Online (Sandbox Code Playgroud)

例如,Google Docs就大型文本文档执行此操作.

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

html javascript

22
推荐指数
1
解决办法
2万
查看次数

如何在HTML/CSS/JS中为表/列表应用行虚拟化?

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

通过行虚拟化,我指的是表/ ul/div的行根本不可见或呈现的概念,只要它们不滚动到视图中.基本上,重点是如果项目从未显示(滚动后面),则消除渲染.

有任何想法吗?我认为DOM元素一旦"滚动到视图"就需要添加到列表中.然后我需要一个不可见的div与所有行的总高度的高度,以使滚动成为可能.

是否有任何简单的代码示例可以实现此目的?

javascript html5 dom css3

6
推荐指数
0
解决办法
6077
查看次数

标签 统计

javascript ×2

css3 ×1

dom ×1

html ×1

html5 ×1