Virtual infinite loop mode
How to create a loop mode with virtual ?
For example if you have a list from [0,...,10], when I'm scrolling to the 10 element if I keep scrolling it will loop from the beginning of my list [7, 8, 9, 10, 0, 1, 2] without scroll back to the first index but more like the infinite mode.
I've tried to play with rangeExtractor without any success....
4 Replies
multiple-amethyst•2y ago
Hi, for sure you need to render extra rows from start and bottom,
having count = 100
you need to have some additional items, i think at least that many would fit one page, let say 15
then totalCount would be count + additional * 2
next, you need to move the list down by the additional to start for real 0
if we assume that row has 50, then
initialOffset: additional * 50,
Now rendering, to get the real index, you need to check if you are in additional palce on in real list,
something like
https://stackblitz.com/edit/stackblitz-starters-xhcqac
having this, now in useLayoutEffect you need to write scrolling logic, when going forward, scroll to top, backward scroll to bottom
provincial-silverOP•2y ago
Hi , Ive tried out your stackblitz (thanks for the time spent here btw!) I have my index looping once , but they are not "infinitly" looping and don't know how to achieve this
I mean just like "infinite scroll" example but with known items (no need to async query)
the perfect example is netflix horizontal infinite carousel
provincial-silverOP•2y ago
provincial-silverOP•2y ago
I have found a workaround toi achieve this, will post it as a codesandbox, would be great to share it as an example in the doc