You most likely already navigated across some sites, blogs or galleries, that present the content in an infinite scroll mode.

Such scrolling can easily be implemented with the Views Infinite Scroll contribution module in Drupal 8. No additional libraries or plugins required.

In this tutorial, we’re going to create a gallery of article teasers of all countries in the Americas. Let’s get started!

Step #1. Create the content

Download, install and enable the Views Infinite Scroll module

Click Content > Add content > Article

Create the articles’ content. It will be a simple article with a picture of the flag and the related content to each country.

Click Save and Publish each time you create an article

Step #2. Configure the teaser display

Click Structure > Content types > Article > Manage Display

Choose the Teaser option

Click on the cogwheel next to the Image field and choose Image style: Large (480x480)

Disable the Links field

Click Save

Step #3. Set up the View

Click Structure > Views > Add new view

Give the view a name according to your type of content

Choose to show content of type Articles

Click the Create a page checkbox

Choose the Display format as a Grid of teasers

Change the Items to display number to 9

Uncheck the Use a pager option

Click the Save and edit button

Step #4. Tweak the Grid

Now it’s time to make some adjustments to the view.

In the FORMAT area of the views interface click on Settings to change the display of the grid

Choose 3 for the number of columns

Click Apply

Step #5. Configure the Sort Criteria

Let's sort the teasers in alphabetical order.

In the SORT CRITERIA area click on Content authored on (desc)

Click the Remove button

The SORT CRITERIA area is now empty.

Click the Add button

Enter the word Title in the Search box

Mark the Title checkbox in the Content category

Click the blue Add and configure sort criteria blue button

Leave the Order criterion as Sort ascending

Click Apply

Step #6 The infinite scroll feature

It’s time to add the infinite scroll functionality to our view.

In the PAGER section click on Display a specified number of items

Choose the Infinite Scroll

Click Apply

You’ll see a couple of options to configure the Infinite Scroll functionality.

To load the content automatically without clicking a button, mark the checkbox Automatically Load Content

Click Apply

Notice: If you want to load the content automatically, you have to enable the use of AJAX in your view. Let's do just that.

Click the ADVANCED section in your views interface on the right, to display the advanced options

Click the Use AJAX link

Check the Use AJAX option

Click Apply

Save the view

Click View page in order to see your gallery

When you scroll down now, you will see how the new content loads.

Congratulations! You now know how to easily create an infinite scroll for all kind of views with the Views Infinite Scroll module.

I hope you enjoyed reading this tutorial. Please, share in the comments below your own experience with creating infinite scrolls on your Drupal sites. Or maybe you have any questions on this tutorial?