Why items are absolutely positioned?

[bhovhannes]

Hi,
Thank you for rewriting react-virtualized, react-window is far cleaner!

I have one question. In both react-virtualized and react-window cells are absolutely positioned. Why?

I have made react-virtualized work with statically positioned items, by inserting a "spacer" div before rows via cellRangeRenderer. That spacer div has margin-top set to the style.top of first rendered row.
When rows are positioned statically

1. There is no need to update top on each row element during scrolling, which makes React update faster.
2. Overlap issues are completely impossible, because rows naturally flow one after another. By saying overlap issues I mean issues when some row dynamically changes its height but Grid consumer don't call recomputeBodyGridSize to make Grid recalculate top offsets for each row so as a result upper row renders overlapping next row.
3. There is no need in storing top offsets for each row and maintaining style cache.

[bvaughn]

I'm on a mobile, so my answer is going to be brief: It has to do with reflow and preserving the appearance of smooth scrolling when scrolling back up past items that have changed size since they were initially rendered.

I wrote a gist about this a while ago, although I didn't finish implementing the second repro example:
https://gist.github.com/bvaughn/ded0061d712a30c22b0a591cec4aa576

Please feel free to share ideas (in the form of code/demos) if you have them though. 😊 I'd be interested in seeing them.

[bhovhannes]

Thank you for quick reply!
I've just succeeded with working implementation and need to test it. I guess my solution is a "hybrid" of absolute and relative positioning models outlined in the gist. Once I'll be happy with solution I'll try to conduct a project in codesandbox illustrating it.

[bvaughn]

Cool. I look forward to seeing it. 😄

[lipoolock]

Hi @bhovhannes
Did you finally became happy with your solution: the "hybrid" positioning ?
I'm looking forward for a "flexible" displaying way, so if you already had found a solution you can share, it would be welcome ;)
Otherwise, I will start now to try an idea
My main constraint is that I will have a list with sometimes an item taking 100% of container width, sometimes 50% => though two items on the same "row" (but this can't be a grid at the end)
(and of course, display will change regarding responsiveness...)

@bvaughn regarding these constraints of item width and alignment, do you think "react-window" still usable ? (I will have sometime thousands of item in the list, with images...)

[bvaughn]

Sorry, I don't know what you're asking.

[bhovhannes]

@lipoolock yes, I am happy with my solution. Luckily react-virtualized provides all needed api for achieving that.

I still have posting it here in my todo list. It's a bit complex and it's hard to disaggregate it to codesandbox considering little amount of time I currently have. I certainly plan to do that though.