jolly-crimson

Initialize (dynamic) list with scroll centered on a particular element?

Bumping this discussion for visibility: https://github.com/TanStack/virtual/discussions/579 We have a dynamic virtualized list being used as a chat messenger. We allow users to search for a particular message and would like the virtualized list to open with that message centered. Is this possible? I know with dynamic elements everything is more challenging. In lieu of this we are currently trying to "scroll to the selected message" on initial render, but due to the weight of our message components we have not yet been able to get the scroll acceptably fast. Any guidance is appreciated.

GitHub

Initial index render? - Without using scrollToIndex? · TanStack vir...

This didn't seem like an issue so just asking the community for help. I have a chat (text message) type UI that I have virtualized using measureElement. We have a search feature where people ca...

5 Replies

dependent-tan•2y ago

Hi, did you check, what or why it's so slow? The 30s mention looks wrong, in dynamic we scroll in loop as offset will change once we got real sizes. Hard to say what's wrong without an example i can debug, btw there is also scrollToOffset method you check if the issue is on virtual side

jolly-crimsonOP•2y ago

Hey thanks for the reply. I did figure out the root causes of our slowdown. 1. The component we create our Virtualizer in is relatively expensive to re-render, which Virtualizer triggers constantly as it scrolls. and 2. Our VirtualItems are rendered/styled with expensive CSS-in-JS styling. Rewriting them in pure JSX with style props improves performance dramatically. I am currently working on a solution that employs the following: a. use scrollToOffset with a calculated range to the desired index to get to the approximate scroll location fast b. after messages load and the dynamic sizes compute, use anotherScrollIndex to close the gap Also working on reducing the render costs of our components with a little reorganization and conversion to some raw style prop styling. Will reply back here if I run into any questions.

dependent-tan•2y ago

Ok 👍

jolly-crimsonOP•2y ago

scrollToOffset was acting funky for me as was getOffsetForIndex... they both appeared to ignore messages outside of the currently rendered overscan field. BUT I was able to get a near "instantaneous" feel using the following:

// example index far back in our list
const exampleIndex = 786;

// get the offset for that index from measurements cache
const offsetForIndex =   virtualizer.measurementsCache[exampleIndex].start;

// mutate scrollOffset directly with a little visual padding
virtualizer.scrollOffset = offsetForIndex - 100;

// example index far back in our list
const exampleIndex = 786;

// get the offset for that index from measurements cache
const offsetForIndex =   virtualizer.measurementsCache[exampleIndex].start;

// mutate scrollOffset directly with a little visual padding
virtualizer.scrollOffset = offsetForIndex - 100;

dependent-tan•2y ago

hmm, overall
virtualizer.measurementsCache[exampleIndex].start and getOffsetForIndex(exampleIndex, 'start`) should yield same result

Gaming

Programming

Initialize (dynamic) list with scroll centered on a particular element?

Did you find this page helpful?