DEV Community

loading...
Cover image for Bare minimum Infinite Scroll UI

Bare minimum Infinite Scroll UI

lapstjup profile image Lakshya Thakur ・1 min read

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.

Discussion (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
lapstjup profile image
Lakshya Thakur Author

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
lapstjup profile image
Lakshya Thakur Author

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
lapstjup profile image
Lakshya Thakur Author

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
lapstjup profile image
Lakshya Thakur Author

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.

Forem Open with the Forem app