Infinite scrolling with Craft?

Question

I'm looking to create an infinite scrolling section of entries on a site we're building. Has anyone tackled this yet? What's the best way to approach this?

Answer 1

Here's the approach that work for me. Using Infinite Scroll jQuery plugin.

In the header, I'm checking whether this is AJAX request or not and use different layout based on that. This is optional though.

{% if craft.request.isAjax %}
{% set layout = "_ajaxLayout" %}
  {% else %}
{% set layout = "_layout" %}
  {% endif %}

{% extends layout %}

In the content area, I have:

<div id="newsPage" class="container">
<div class="row" id="newsRow">
{% paginate craft.entries.section('news').limit(3) as entriesOnPage %}
    {% for entry in entriesOnPage %}
    <div class="col-md-4 col-sm-6 margin-bottom">
        <div class="item">
            <div class="entry">
                <h2>{{ entry.title }}</h2>
                <div class="date">{{ entry.postDate|date("M d, Y") }}</div>
                {{ entry.body }}
            </div>
        </div>
    </div>
    {% endfor %}

    {% if paginate.nextUrl %}
    <div class="pagination">
        <a href="{{ paginate.nextUrl }}">Next Page</a>
    </div>
    {% endif %}

{% endpaginate %}                                           
</div>
</div>

Then, somewhere in the footer (note the If, I put it to make sure the infinite scroll fors only on first page)

{% if craft.request.pageNum==1 %}

{% paginate craft.entries.section('news').limit(3) as entriesOnPage %}
{% if paginate.nextUrl %}
<script src="/resources/js/infinite-scroll/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$('#newsPage').infinitescroll({
 navSelector  : "div.pagination",            
 nextSelector : "div.pagination a:first",    
 itemSelector : "#newsPage>div.row",
 maxPage      : {{paginate.totalPages}},
});
</script>
{% endif %}
{% endpaginate %}   

{% endif %}

Answer 2

To handle this I would use Craft's pagination tag.

I would get the URL out of the next link to determine the URL address to do the ajax call on and pull in the next chunk of content with ajax from that page when you hit a certain scroll point on the page which you would need to configure with javascript.

Also because you care about all users even the ones without javascript you will make the next button visible to users without javascript so they can access all the content since they can't "infinite scroll" :)

Answer 3

Infinite Scroll plugin for Craft CMS 3,

Installation

To install the plugin, follow these instructions. 1. Open your terminal and go to your Craft project:

cd /path/to/project

2. Then tell Composer to load the plugin:

   composer require statikbe/craft-infinite-scroll

3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Infinite Scroll.

Answer 4

Here's article on my blog that describes how to implement infinite scrolling using Element API plugin:

http://craftsnippets.com/articles/infinite-scrolling-and-lazy-loading-with-craft-cms?s=s