How To Create Smooth Endless Scrolling in Vue.js

Without any jittering or external libraries

Photo by Xiong Yan on Unsplash.

In this article, I will explain how to create a page in Vue.js with smooth endless scrolling. To illustrate how it’s done, I’ll create a very simple search page on which you can scroll endlessly through the results.

The goal is for the page to be smooth, fast, and free of potential performance issues.

Why am I calling it a smooth endless scrolling page? To keep the experience smooth for the end-user, they must be able to endlessly scroll without constantly waiting for the page to load. Keeping that in mind, let’s start with our simple application.

To begin, we create a new project using vue-cli with vue create my-project-name.

We’re going to need three components:

• One generic component for our search page and list
• A component for the individual search results
• A loader component

We’ll be using the component for the individual search results as part of a virtual scroller. I will explain the benefits of that in a bit.