How to perform action strictly after scrollToIndex has already finished?

[ollie-o]

Firstly I just want you to know that before posting this issue, I tried asking on Stack Overflow to no avail. Here is the link to the unanswered post.

I also tried to access the Slack channel but was not authorized to log in.

---

I have a <List> component. I am building a feature where it:

1. Scrolls to a particular row in the <List>. It does by using the ~~scrollTo~~ scrollToIndex prop.
2. Scrolls to a particular line in that row. It does this by doing document.getElementById('myId').scrollIntoView().

How can I ensure that step (2) occurs after step (1)?

Note: I have already tried both onRowsRendered and onScroll but even using those callbacks, there is still a race condition between (2) and (1).

Here is the CodeSandbox link

Update: despite trying for a long time, I can't actually get the CodeSandbox example to reproduce the race condition. I definitely am seeing such a race condition in my local instance, but since I can't reproduce it, it's probably a problem specific to my project 😢.

Please feel free to close the issue.

[wuweiweiwu]

Hi @oliverodaa do you mind clarifying some things?

Do you mean the scrollTop or scrollToIndex props? I

If those do not work for your use cases. these public functions on the List class can probably do it https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#scrolltoposition-scrolltop-number

Join the slack by going to this link https://react-virtualized.now.sh/

[ollie-o]

Yes my apologies, in the 1st dot point of my question I had meant to write "scrollToIndex prop". The title and CodeSandbox link are both accurate.

As you can see in the CodeSandbox link, I'm using scrollToIndex correctly (I think).

My question is about a race condition that I am seeing in my own code base (but can't reproduce in the CodeSandbox, sorry).

Here is the question:

Is onScroll guaranteed to always occur after scrollToIndex has completed?

[wuweiweiwu]

to answer your question. the onScroll prop you pass in is bound to the html onscroll event which is triggered every moment you scroll. The scrollToIndex prop is used to calculate the scrollTop and then is manually set on the html element.

So onScroll is actually not called when you just use scrollToIndex

[akraines]

See https://stackoverflow.com/a/41111505/5683904

[akraines]

https://stackoverflow.com/a/49937960/5683904

[say8425]

I suggest attaching a debounce to onScroll event. This was easier than making a custom onScrollEnd or onRenderEnd event.