Montlebalm Montlebalm - 1 month ago 8
React JSX Question

Jump back to index using `scrollToIndex` a second time

(This question pertains to the react-virtualized library)

I have a component that uses

<List>
to display several categories of items. The resulting output looks something like:

Jump to: Planets, Nebulae

PLANETS
- Mercury
- Venus
- Jupiter
- ...
NEBULAE
- Horsehead
- Ant
- Boomerang
- ...


I'd like to use the "Jump to" links to scroll to the start of the corresponding section in the list. If I scroll around some I'd like subsequent clicks of the jump link to take me back to the section.

The first time I click the "Nebulae" link it works fine, but nothing happens on subsequent clicks. I assume this is because
scrollToIndex
is a prop and doesn't change after the first click. I've tried using
forceUpdateGrid
but it doesn't seem to reset the scroll position.

Is there a way to jump to the same index multiple times in a row?

Answer

Unfortunately, this is a limitation of the props approach. (react-virtualized only manually scrolls when it detects a new prop. Otherwise, users would be unable to scroll with their mouses once an initial prop was set.)

One way to work around this is to unset the scrollToIndex prop once you've set it (so that if you then reset it, it will still be a new value). Temporarily unsetting it (aka resetting it to undefined) will have no affect on the list either so you should be fine.

Comments