search

clauderic / react-tiny-virtual-list

A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!
https://clauderic.github.io/react-tiny-virtual-list/
MIT License
2.46k stars 165 forks source link

Suggestion: change padding-top & padding-bottom of the container #82

Open felixmosh opened 4 years ago

felixmosh commented 4 years ago

Hi,

I've investigated how virtuallization of Instagram works and saw that they are not using position: absolute at the children & not updating children positioning / styles at all, instead they changing padding-top & padding-bottom of the parent container! (SUPER COOOL 🤩).

WSdq465kVC

WDYT? can we refactor this lib to something similar?

clauderic commented 4 years ago

This is do-able, but I'm not clear on what the benefits would be. Have you tested the performance of this approach over the current approach?

felixmosh commented 4 years ago

The benefit is that you are not using absolute positioning on the items, that means that the items will have native flow inside the container.

clauderic commented 4 years ago

You still need to provide exact height measurements for every single item, and you won't be able to use margin between the items, so I'm still not sure I see a clear benefit

felixmosh commented 4 years ago

There is margin between items in Insta & as you see there is no explicit height on the container but it derived, so there is a possibility to allow overflow... And it still work!

Additional benefite of native flow is the support for RTL in horizontal list for free.

felixmosh commented 4 years ago

Think of it, it not requires overflow: hidden & height on the wrapper, no need for position:absolute + height on each item...

felixmosh commented 4 years ago

I see that twitter are doing the same thing image