Infinite Scroll with set number of virtual items
I'm implementing infinite scroll. When the user gets near the last item, I'd like to add a few items to the virtualizer and remove the same number from the beginning.
Anyone got any tips on how to implement this behavior without causing a runaway effect?
8 Replies
sunny-greenOP•3y ago
I drew a little diagram out to try and debug. Things became a lot clearer. I think what I need to do is (for example) if I add three items to the end and remove three from the beginning, I need to simultaneously scroll the virtualiser back by three items.
genetic-orange•3y ago
what happens when you scroll back up?
do you add these items?
maybe try playing with paddingStart, add the size of the removed items there
sunny-greenOP•3y ago
paddingStart is a nice idea - I hadn't thought of that
I calculated the width of the items to be removed, before actually removing them, and then used scrollToOffset to account for the difference
I linked a codesandbox somewhere else in this discord
genetic-orange•3y ago
thank you 🙂
I guess it depends on the product, whether it should feal like items are added - scroll bar is getting smaller
or that items are replaces - scroll bar stays the same
linked a codesandbox somewhere else in this discordnot aware of a way for me to find it 🙂
genetic-orange•3y ago
@shreake had a look on the revers scroll issue, interesting part is the sync scroll when we prepend items on top and don't unmount current items, got something like this https://codesandbox.io/s/lively-leaf-4mext1?file=/pages/index.js
Basic the idea is to return prev items till the scroll will sync. Question is when to reset the value that controls rendering of prev items 🤔
piecyk
CodeSandbox
lively-leaf-4mext1 - CodeSandbox
lively-leaf-4mext1 by piecyk using @faker-js/faker, @tanstack/react-query, @tanstack/react-query-devtools, @tanstack/react-virtual, axios, isomorphic-unfetch, next, react, react-dom
sunny-greenOP•3y ago
Had a quick skim on mobile. Will try to look closer when I am at a desk.
From skimming it, this looks like this is a normal (additive) infinite scroll but in reverse? That is, the number of virtual items is growing over time.
What I was trying to achieve was an infinite scroll in two directions where the number of virtual items remained constant but items were being appended to one end and removed from the other simultaneously.
genetic-orange•3y ago
@shreake was playing more with bi-directional infinite list https://codesandbox.io/s/infinite-scroll-both-c08vxk?file=/pages/index.js
just fyi, in cases like this we want to sync scroll in same time data changes, to keep same range in view.
piecyk
CodeSandbox
infinite-scroll-both - CodeSandbox
infinite-scroll-both by piecyk using @tanstack/react-query, @tanstack/react-query-devtools, @tanstack/react-virtual, axios, isomorphic-unfetch, next, react, react-dom, react-intersection-observer
sunny-greenOP•3y ago
Thanks @piecyk
Yes this is a little closer to what I was trying to implement (and yes I was trying to do exactly what you describe - synchronising the scroll with the data changes). It's still a little different to what I implemented because in my case the number of items did not change (e.g. I was adding 3 items at one end while removing 3 from the other). My items are also synchronously available. I did get something working and shared a sandbox somewhere in this discord but I am struggling to find it just now.
The overall UX was still a bit janky though. I got drawn into other priorities since then so haven't ironed out the details yet.