Skip to main content

Tell us about your project

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

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

Step I

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

 

Step II

Then go to your View configuration page, and under Pager section set 'Use pager' option to Infinite Scroll. Then choose to 'Automatically Load Content' and set number of items which will be loaded. In my case it's 3, you can set it however you like. Just make sure that '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 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 %}

       

      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.