📚 A tiny but mighty list virtualization library for Svelte, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!
Instead of setting top style on the items - if I replace with transform the performance appeared far smoother on older mobiles ie tested on samsung s9 also for large datasets the scrollbar on desktop had less lag in chrome.
transform:translateY(${offset}px)
Also looking at the dynamic heights instead of fixed or having an array of calculated heights..
It looks like twitter looks at previous sibling item element and any changes to the height of that element - auto changes all the following next sibling items top position so that height does not need to be defined and is horizontally responsive - I'm sure there is more logic to calculate full initial size and resize and scroll position this was just an initial observation as twitters approach appears very similar.
I was looking at twitter.com and some thoughts..
Instead of setting top style on the items - if I replace with transform the performance appeared far smoother on older mobiles ie tested on samsung s9 also for large datasets the scrollbar on desktop had less lag in chrome.
Also looking at the dynamic heights instead of fixed or having an array of calculated heights.. It looks like twitter looks at previous sibling item element and any changes to the height of that element - auto changes all the following next sibling items top position so that height does not need to be defined and is horizontally responsive - I'm sure there is more logic to calculate full initial size and resize and scroll position this was just an initial observation as twitters approach appears very similar.