簡單的無限滾動問題

Question

我目前正在嘗試為我的網站構建無限滾動，但是我被卡住了：-/

我想顯示一些scroll項，然后在我開始向下滾動時讓其余的scroll項加載。 如何使用當前腳本實現此目標？

http://jsfiddle.net/sphhrrmo/

 $('.scroll').jscroll(); 

 <script src="https://raw.githubusercontent.com/pklauzinski/jscroll/master/jquery.jscroll.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="scroll"> <h3>Page 1</h3> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> </div><div class="scroll"> <h3>Page 1</h3> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> </div><div class="scroll"> <h3>Page 1</h3> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> </div><div class="scroll"> <h3>Page 1</h3> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> <p>Content here...</p> </div> 

Answer 1

var count = 0; $(window).scroll(function(){ if($(this).scrollTop()+$(window).height() > $(document).height() - 10){ console.log( $(this).scrollTop()+$(window).height() + " " +$(document).height());
$(".res").append("<br/>content " + count); count++; } });

<div class="res">Content</div>

http://jsfiddle.net/sphhrrmo/1/