Infinite scroll

Load new items when user scroll to bottom of page。

demo

What you should do is only add a infinite-scroll class to div.content

infinite scroll

...
{% highlight html %}

infinite scroll

{% endhighlight %}

Note：

javacript:

{% highlight js %} var loading = false; var maxItems = 100; var itemsPerLoad = 20; function addItems(number, lastIndex) { var html = ''; for (var i = lastIndex + 1; i <= lastIndex + number; i++) { html += '
  • Item ' + i + '
    • '; } $('.list-container').append(html); } addItems(itemsPerLoad, 0); var lastIndex = 20; $(document).on('infinite', '.infinite-scroll',function() { // 如果正在加载，则退出 if (loading) return; // 设置flag loading = true; setTimeout(function() { loading = false; if (lastIndex >= maxItems) { $.detachInfiniteScroll($('.infinite-scroll')); $('.infinite-scroll-preloader').remove(); return; } addItems(itemsPerLoad, lastIndex); lastIndex = $('.list-container li').length; }, 1000); }); {% endhighlight %}

    infinite scroll on top of page

    If you want load items when scroll top of page，you should add infinite-scroll-top class to page-content.

    infinite scroll on top

    ...
    {% highlight html %}

    infinite scroll on top

    ...
    {% endhighlight %}

    Infinite scroll Event

    Event Target Description
    infinite div.content.infinite-scroll Trigger when user scroll to bottom of page. use data-distance to set distance.

    API

    Two methods can use：

    {% highlight js %} $.attachInfiniteScroll(container) - attach infinite scroll listener on container parameters - HTML Element or CSS Selector. {% endhighlight %} {% highlight js %} $.detachInfiniteScroll(container) - remove infinite scroll event parameters - HTML Element or CSS Selector. {% endhighlight %}

    You need to use $.attachInfiniteScroll only after you have called $.detachInfiniteScroll. The $.detachInfiniteScroll method will auto be called when infinite scroll component init.