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:
- Listen to a scrolling event
- If the user scrolled all the way down (or your preferred scrolling distance), fetch more resources (images by picsum.photos in this case)
- Append fetched resources to DOM
And here it is: