Discussion

[lishine]

Hi,

Does your lib works as react-window regarding that it renders only what is in the window ?
If so then you solved the problem that these guys didn't solve:
researchgate/react-intersection-list#2 (comment)

[HenrikBechmann]

Hi @lishine. Yes only a handful of items are rendered in the "cradle" as scrolling occurs. Items are dropped at one end and added at the other, driven by IntersectionObserver. Note that the cradle extends into 'runways' beyond the viewport borders to give items a chance to be assembled before coming into view. That seems to work fine for normal scrolling (depending to an extent on hardware). Delegating content loading to requestIdleCallback also helped.

For very rapid scrolling (such as using the scrollbar thumb on a very large list), there is a second intersection observer on the cradle itself. If the cradle gets behind enough to wander out of the viewport altogether, then the scroller gives up on rendering and instead provides feedback on the relative position in the list during the rapid scroll. The user wouldn't be able to see those renders anyway, given the speed of scrolling. When the scrolling stops, the cradle (rendered items) is reconstituted. This allows for realistic, low resource, repositioning in extremely large lists. The host can get feedback of item numbers being bypassed during the repositioning, and could therefore enhance the feedback with something like categories that pass by during the repositioning, or perhaps a progress bar of some sort.

So yes I think some design thinking has come pretty close to solving that problem, given a modern browser and reasonably decent hardware.

All feedback is welcome of course, and thanks for your interest!

I'm still looking at the algorithm, to see if I could find an improved one that supports variable size items as well. No promises yet, but some ideas...

Some of the math and logic drove me nuts though! :-/

[lishine]

Very cool man! I will mention this in their issue.
I am doing now a copy of unsplash, which is masonry, just for curiosity.
Currently I will implement this with react-virtualized, because I don't see a ready alternative and currently is not my priority to dig into implementation though it is interesting, I admit.

[lishine]

Thinking about how to implement masonry or a variable height grid.
What do you think, dealing with each column as a separate list, but scrolling synchronously, would it work?

[HenrikBechmann]

I gather that a container can scroll multiple divs, yes. (but I haven't tried it) https://stackoverflow.com/questions/49857618/how-to-scroll-two-divs-at-the-same-time

... or just enclose multiple divs in a scrolling container. Flexbox may help?

Also grid dense may help. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow