Is there a way to execute a function only after scrollTo has finished executing?

Question

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 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 the onRowsRendered() but it looks like that is not always executed after scrollTo.

Documentation is here, but unfortunately I'm quite stuck.

---

Edit: In case anyone comes across this question in future, I got kind of an answer over at the GitHub repo:

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.

https://github.com/bvaughn/react-virtualized/issues/1077#issuecomment-381438215

Answer 1

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

// Keep track of last scroll position
_lastScrollTop;
_cellRangeRenderer(props) {
    this._rowSizeAndPositionManager = props.rowSizeAndPositionManager;
    if (props.isScrolling === false && this._lastScrollTop !== props.scrollTop) {
        // Only call this function if
        this._lastScrollTop = props.scrollTop;
        this.onAfterScroll();
    }
    return defaultCellRangeRenderer(props);
}

onAfterScroll(){
  //Do what you want to do after scrolling has stopped.
}

In order to scroll to specific div in the DOM (2)

document.getElementById('myId').scrollIntoView()

you have to ensure that the dom has already been rendered.

onNextFrame(callback) {
    window.requestAnimationFrame(callback);
}
//And wrap the function that accesses the Dom directly like this
onNextFrame(() => {
            let target = document.querySelector(`...`);
            ...
        });