Tell us about your project

Set Infinite Scroll using Views Infinite Scroll Module (Drupal 8)

Set Infinite Scroll Using Views Infinite Scroll Module (Drupal 8)

Recently, working on one project, I had to create an infinite scroll on the news page, which is a view. There are several ways to make it work, but for me, the easiest one was using the Views Infinite Scroll module. I'll explain to you in this tutorial, step by step, how to accomplish this.

Step I

First, you have to download and install the Views Infinite Scroll module if you haven't already.

Step II

Then go to your View configuration page, and under the `Pager` section set the 'Use pager' option to Infinite Scroll. Then choose 'Automatically Load Content' and set the number of items that will be loaded. In my case it's 3, you can set it however you like. Just make sure that the 'More link' option is set to 'No'.

Clear your cache.

Step III

After you visit your View page, you can see already View infinity scroll working.

In case you wish loading animation to also appear, we'll have to make some custom changes in the template file of Views infinite scroll module views-infinite-scroll-pager.html.twig. 

It's located in '/modules/views_infinite_scroll/templates'.

You can copy that file into templates folder of your custom theme, and add some changes, like these:

{% if items.next %}
  <img src="/themes/bhvision/images/loading.gif"/>
{% endif %}
{% if items.next %}

All I did was just adding one div with class name 'loading' to an image positioned in it. That image will be our loading animation.

Also, I made some customization in CSS, where I have positioned that loading animation centered in that div and set it to appear every time it`s needed.

.loading{ text-align: center; }
.js-pager__items {
  position: relative !important;
  clip: inherit;
  overflow: inherit;
  height: inherit;
  width: inherit;
  word-wrap: inherit;
  opacity: 0.5;
  animation: throb 0.5s 0.5s infinite;
}
@keyframes throb {
  0% { opacity: 1; }
  {50% { opacity: 1; }100% { opacity: 1; }
}

After you have finished all these steps, clear again your cache and visit the page. You should see the expected result.