In this post I would like to share a codepen I created with an infinite scroll demo. For this demo I don’t use any library or framework – only vanilla JS, plain CSS and HTML. I wanted to spice up my demo, so I created an image masonry grid and a simple loader. The images grid gets populated with more images once you scroll down. So, there are some “unessential” elements to this demo, and when reading the code, I suggest focusing on the JS part of things.

The basic “plan” for the code is this:

1) Listen to a scrolling event

2) If the user scrolled all the way down (or your preferred scrolling distance), fetch more resources (images by picsum.photos in this case)

3) Append fetched resources to DOM

And here it is:

See the Pen 🍦 VANILLA JS INFINITE SCROLL by Yossi Abramov
(@yossi_abramov) on CodePen.

✍ For more posts:
https://yossiabramov.com/