<p>Here's the approach that work for me. Using <a href="https://github.com/paulirish/infinite-scroll">Infinite Scroll</a> jQuery plugin.</p>

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

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

{% extends layout %}
</code></pre>

<p>In the content area, I have:</p>

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

    {% if paginate.nextUrl %}
    &lt;div class="pagination"&gt;
        &lt;a href="{{ paginate.nextUrl }}"&gt;Next Page&lt;/a&gt;
    &lt;/div&gt;
    {% endif %}

{% endpaginate %}                                           
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

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

<pre><code>{% if craft.request.pageNum==1 %}

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

{% endif %}
</code></pre>

CC BY-SA 3.0
2015-03-24T16:47:25.503Z
Does it have any downsize from Craft's site using infinite scroll?
Dominik Krulak
CC BY-SA 3.0
2015-03-24T18:58:00.167Z
@Dominik If you don't build carefully, visitors without JavaScript (and crawlers) might not make it page page one. Yuri's approach, and my quick test with Waypoints.js recommended by Ben, rely on a working+standard pagination link and therefore do just fine!
Matt Stein
CC BY-SA 3.0
2015-03-24T21:22:00.147Z
I'm aware of that, but due to statistics, globally around 1% of internet users, browses the web with javascript disabled. By some time, turning off Javascript will not be optional. Waypoints infinite scroll is another option, but it does pretty much the same job as infinite scroll, depends on quality of coding. I found, that Google found [solution](http://scrollsample.appspot.com/items) for it. Wouldn't be bad to make it happen.
Dominik Krulak
CC BY-SA 3.0
2015-01-16T11:10:23.260Z
2015-01-16T11:10:23.260Z
Yuri Salimovskiy
<p>To handle this I would use Craft's <a href="http://buildwithcraft.com/docs/templating/paginate" rel="noreferrer">pagination tag</a>.</p>

<p>I would get the URL out of the <a href="http://buildwithcraft.com/docs/templating/paginate#previous-next-page-links" rel="noreferrer">next link</a> 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.</p>

<p>Also because you care about <strong>all</strong> 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" :)</p>

CC BY-SA 3.0
2014-10-02T06:04:55.357Z
2014-10-02T06:04:55.357Z
jnowland
<p><a href="https://github.com/statikbe/craft3-infinitescroll" rel="nofollow noreferrer">Infinite Scroll plugin for Craft CMS 3,</a> </p>

<p><strong>Installation</strong></p>

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

<pre><code>cd /path/to/project
</code></pre>

<ol start="2">
<li><p>Then tell Composer to load the plugin:</p>

<p>composer require statikbe/craft-infinite-scroll</p></li>
<li><p>In the Control Panel, go to Settings → Plugins and click the “Install” button for Infinite Scroll.</p></li>
</ol>

CC BY-SA 4.0
2019-09-17T14:30:07.307Z
2019-09-17T14:30:07.307Z
Sameera Thilakasiri
<p>Here's article on my blog that describes how to implement infinite scrolling using Element API plugin:</p>

<p><a href="http://craftsnippets.com/articles/infinite-scrolling-and-lazy-loading-with-craft-cms?s=s" rel="nofollow noreferrer">http://craftsnippets.com/articles/infinite-scrolling-and-lazy-loading-with-craft-cms?s=s</a></p>

CC BY-SA 4.0
2019-11-12T00:11:33.963Z
2019-11-14T20:53:01.500Z
2019-11-14T20:53:01.500Z
Piotr Pogorzelski
<p>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?</p>

CC BY-SA 3.0
2014-09-30T23:14:59.947Z
Hi Adam. Not a full answer, but relevant AJAX tips here: http://craftcms.stackexchange.com/questions/526/do-i-need-a-plugin-to-load-entries-via-ajax/528#528
Matt Stein
CC BY-SA 3.0
2014-10-01T05:12:11.490Z
Following the lead of @MattStein, another incomplete answer! We use waypoints.js on Straight Up Craft and it works nicely: http://imakewebthings.com/jquery-waypoints
Ben Parizek
<entries>
Infinite scrolling with Craft?
# Infinite scrolling with Craft?

(Asked by: username_0 on 2014-09-30)

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?

**Tags:** entries
> **Comments:**
> **username_1**: Hi Adam. Not a full answer, but relevant AJAX tips here: http://craftcms.stackexchange.com/questions/526/do-i-need-a-plugin-to-load-entries-via-ajax/528#528  
> **username_2**: Following the lead of @MattStein, another incomplete answer! We use waypoints.js on Straight Up Craft and it works nicely: http://imakewebthings.com/jquery-waypoints  

---

## 4 answers

### Answer by username_3 on 2015-01-16. Score: 8

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:


{% paginate craft.entries.section('news').limit(3) as entriesOnPage %}
    {% for entry in entriesOnPage %}
    
        
            
                {{ entry.title }}
                {{ entry.postDate|date("M d, Y") }}
                {{ entry.body }}
            
        
    
    {% endfor %}

    {% if paginate.nextUrl %}
    
        Next Page
    
    {% endif %}

{% endpaginate %}                                           



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


{% endif %}
{% endpaginate %}   

{% endif %}

> **Comments:**
> **username_4**: Does it have any downsize from Craft's site using infinite scroll?  
> **username_1**: @Dominik If you don't build carefully, visitors without JavaScript (and crawlers) might not make it page page one. Yuri's approach, and my quick test with Waypoints.js recommended by Ben, rely on a working+standard pagination link and therefore do just fine!  
> **username_4**: I'm aware of that, but due to statistics, globally around 1% of internet users, browses the web with javascript disabled. By some time, turning off Javascript will not be optional. Waypoints infinite scroll is another option, but it does pretty much the same job as infinite scroll, depends on quality of coding. I found, that Google found [solution](http://scrollsample.appspot.com/items) for it. Wouldn't be bad to make it happen.  

---

### Answer by username_5 on 2014-10-02. Score: 5

To handle this I would use Craft's [pagination tag](http://buildwithcraft.com/docs/templating/paginate).

I would get the URL out of the [next link](http://buildwithcraft.com/docs/templating/paginate#previous-next-page-links) 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 by username_6 on 2019-09-17. Score: 1

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


Then tell Composer to load the plugin:
composer require statikbe/craft-infinite-scroll
In the Control Panel, go to Settings → Plugins and click the “Install” button for Infinite Scroll.


---

### Answer by username_7 on 2019-11-12. Score: 1

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>


---

