7 ms·
How would you query the location where you need to load more data when scrolling down (the highest empty spot)?
by nitwit005 10mo ago
How would you query the location where you need to load more data when scrolling down (the highest empty spot)?
- jonah 10mo agoYou just append new <figure> elements to the <main> in the example and it will automatically put them in the appropriate column.
- nitwit005 10mo agoYour answer doesn't appear to relate to what I asked. You need to know when to query the backend for more data if it's an infinite scrolling setup.
- jonah 10mo agoAahh. The way you phrased your question was pretty ambiguous. The other posters have good answers. One thing to consider for a smooth interaction would be to eagerly load the next x elements before they scroll into view.
- pcl 10mo agoYeah I’d assume you’d eagerly load enough to make sure everything gets at least partially into the viewport, and maybe a fee more to optimize for network latency. And then perhaps track elements whose trailing ends are not in the viewport, and load more once those become fully visible?
- tom1337 10mo agoI guess you can just start loading a first batch, add an intersection observer to the last 3 elements (if you have 3 lanes) and then when one of those intersects you simply start fetching the next.
- notpushkin 10mo agoHmm, I think we only need to observe the `elements.at(-numberOfLanes)`, as it should be the first to enter the screen anyway.
- rokkamokka 10mo agoI suppose just checking scroll height of the container? Once you're x pixels above the bottom, fetch more. Not the smoothest, but doable