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)
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.
Hey Muhammad can you elaborate on the issue. I am sorry I didn't get you.
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.
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 ?
Google Chrome: v88.0.4324.104. I'm opening this in Desktop, Windows 10.
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.
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.
Yes, it works now, thank you!
Very nice! Thanks for sharing.