简单的无限滚动问题

Question

我目前正试图为我的网站制作一个无限卷轴，但我被卡住了： - /

我想显示一些scroll项，然后在我开始向下滚动时让其余项加载。如何使用我当前的脚本实现这一目标？

http://jsfiddle.net/sphhrrmo/

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/