DEV Community

Cover image for Bare minimum Infinite Scroll UI
Lakshya Thakur
Lakshya Thakur

Posted on

Bare minimum Infinite Scroll UI

Infinite scrolling ui is implemented in many web apps today. So in an attempt to explore the same, I made a bare minimum codepen to achieve the same with two different implementations :-

๐Ÿ“Œ Using Scroll Position - Making use of scrollTop, offsetHeight and scrollHeight to know when to load the next items.

๐Ÿ“Œ Using Intersection Observer - Having a placeholder at bottom of the list and observing when it intersects with our list in view so that we can load the next items.

Top comments (9)

Collapse
 
hasnaindev profile image
Muhammad Hasnain

Hey, thanks for sharing this. I noticed that the "Scroll Position" position does not when I select it and "Intersection Observer" only loads new items once.

Collapse
 
lakbychance profile image
Lakshya Thakur

Hey Muhammad can you elaborate on the issue. I am sorry I didn't get you.

Collapse
 
hasnaindev profile image
Muhammad Hasnain

When I click on "Scroll Position" and scroll down, the items in the list do not increase from 30. They remain 30 regardless of what I do. When I click on intersection observer and scroll down, it loads more items, up to 61 and doesn't load any more items.

Thread Thread
 
lakbychance profile image
Lakshya Thakur

Hmn. It's working for me in all browsers though. Can you share the browser and its version ?. Also are you opening this in mobile or desktop ?

Thread Thread
 
hasnaindev profile image
Muhammad Hasnain

Google Chrome: v88.0.4324.104. I'm opening this in Desktop, Windows 10.

Thread Thread
 
lakbychance profile image
Lakshya Thakur

I tried replicating this in google chrome and windows 10 but it's working for me. This is a weird behaviour. I haven't been able to replicate fail scenario so it's hard to debug.

Thread Thread
 
lakbychance profile image
Lakshya Thakur

Hey I tried to solve it for someone else who was facing the same issue. I think it should work for you as well. Reload this page and try.

Thread Thread
 
hasnaindev profile image
Muhammad Hasnain • Edited

Yes, it works now, thank you!

Collapse
 
dmahely profile image
Doaa Mahely

Very nice! Thanks for sharing.