如何只在页面上显示特定数量的div并在用户滚动到底部时加载更多？

Question

有6个div都具有相同的类。如何才能使页面上只显示前3个div，当用户滚动到页面底部时，会显示其他3个div？

此外，可能并不总是只有6个div。让我们说有12个div，代码仍然需要显示前3个div，并在用户滚动到页面底部时继续显示3个。

<div class="post">
Lorem
</div>

<div class="post">
Lorem ipsum
</div>

<div class="post">
Lorem ipsum ....
</div>

<div class="post">
Lorem...
</div>

<div class="post">
Loremsdfdsf
</div>

<div class="post">
Lorem.......
</div>

我只是设法找到了这个http://jscroll.com/，但它要求您在页面底部包含一个href链接到您希望在用户滚动到结尾时显示的文件。

Answer 1

您还可以使用jQuery方便的方法scrollTop（）并使用scroll（）捕获scroll事件。您只需检查滚动是否足够，如果是，则加载新内容。