0

所以我见过的大多数无限滚动都与已经分页的元素有关。它基本上对下一页进行 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' 类，所有地狱都会崩溃，这显然不是我想要的。

4

1 回答 1

0

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

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

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

于 2013-10-16T15:53:37.913 回答