已经加载的Divs无限滚动

Question

所以我见过的大多数无限滚动都与已经分页的元素有关。它基本上对下一页进行ajax调用，并在窗口到达某个断点时显示。

我正在处理已经在页面上加载了100个轻量级div的代码，但是，出于UI的目的，我们希望在滚动到div时延迟加载div而不是一次显示所有div。基本结构看起来像这样：

<div class="container">
  <div class="element">
     some other html
  </div>
  <div class="element">
     some other html
  </div>
  <div class="element">
     some other html
  </div>
  <div class="element">
     some other html
  </div>
  .... 100 times
</div>

有没有简单的方法来实现这一目标？ jscroll插件似乎应该可以工作，但是当我尝试以下js时：

$（ '容器'）jscroll（）;

似乎我认为我不希望在整个容器结束之前实现延迟加载。当我到达容器的末尾时，页面崩溃了。如果我将jscroll绑定到'element'类，那么所有的地狱都会破坏，这显然不是我想要的。

Answer 1

所以：你想要占位符div而不是真实内容。滚动条的长度应该从头开始最大，当div进入视图时，您将加载内容。

重要的是要知道每个div有多高，否则你可以渲染一个合适的占位符。

如果已经有了，请将滚动侦听器添加到滚动容器中。每次滚动时，找出视口中的哪些div（通过查看.scrollTop和height并定位占位符div的偏移量。然后加载div的内容。