Making an infinite scrolling list using vanilla js

I’ll be building a calendar as an example but the underlying principle is still the same. I’m going to assume you know CSS basics and you’re able to style divs to make a calendar like shown below.

This is an optimized list. We wont be adding new items as we scroll up/down, instead we’ll reuse items which are not visible in the view port. This way, we’re maintaining only a set number of elements at anytime. The idea is to fill the view port with the maximum number of items & also add buffer elements at both ends so that we have smooth transitions. You can add additional buffer elements if are lazy loading data so that data is present by the time you scroll down to element. There wont be any lag in data loading.

Here’s the scroll listener in action

Here, BOX_HEIGHT is simply the height of each of row & BUFFER_HEIGHT is the total height of all the buffer boxes. You can check out the source code of the actual app for reference.

Calendar app source

If you liked the calendar app, you can find the source code below. You can host it somewhere and connect your own firebase firestore and start using it.

basith374/event-tracker

Configuring firestore

You’ll have to setup the event names & colors in firestore. Add a table and set the as the eventKey in src/config.js. Next add your event names & their colors in firestore.

[
  { "name": "foo", "color": "red" },
  { "name": "bar", "color": "blue" },
  { "name": "baz", "color": "yellow" }
]