Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-24T16:47:25.503Z
Answers.Text: Does it have any downsize from Craft's site using infinite scroll?
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-24T18:58:00.167Z
Answers.Text: @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!
Answers.UserDisplayName: Matt Stein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-24T21:22:00.147Z
Answers.Text: 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.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-01-16T11:10:23.260Z
Answers.LastActivityDate: 2015-01-16T11:10:23.260Z
Answers.UserDisplayName: Yuri Salimovskiy
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-02T06:04:55.357Z
Answers.LastActivityDate: 2014-10-02T06:04:55.357Z
Answers.UserDisplayName: jnowland
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-09-17T14:30:07.307Z
Answers.LastActivityDate: 2019-09-17T14:30:07.307Z
Answers.UserDisplayName: Sameera Thilakasiri
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-11-12T00:11:33.963Z
Answers.LastActivityDate: 2019-11-14T20:53:01.500Z
Answers.LastEditDate: 2019-11-14T20:53:01.500Z
Answers.UserDisplayName: Piotr Pogorzelski
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-09-30T23:14:59.947Z
Comments.Text: 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
Comments.UserDisplayName: Matt Stein
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-10-01T05:12:11.490Z
Comments.Text: 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
Comments.UserDisplayName: Ben Parizek
Tags: <entries>
Title: Infinite scrolling with Craft?
ThreadText: # 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 username_0. 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 @username_1, 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](https://github.com/paulirish/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 %}
  
  ```
  
  > **Comments:**
  > **username_4**: Does it have any downsize from Craft's site using infinite scroll?  
  > **username_1**: @username_4 If you don't build carefully, visitors without JavaScript (and crawlers) might not make it page page one. username_3'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,](https://github.com/statikbe/craft3-infinitescroll)
  
  **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 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>
  
  
  ---
  
  