使用已加载的 Div 无限滚动

Question

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

我正在处理的代码已经在页面上加载了 100 个轻量级 div，但是，出于 UI 目的，我们希望在 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 时：

$('.container').jscroll();

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

Answer 1

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

了解每个 div 的高度很重要，否则您可以渲染合适的占位符。

如果你有这个，给滚动容器添加一个滚动监听器。每次滚动时，找出哪些 div 在视口中（通过查看 .scrollTop 和 height 以及占位符 div 的位置偏移量。然后加载 div 的内容。