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:

Scrolls to a particular row in the <List>. It does by using the scrollToIndex prop.
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

akraines · Accepted Answer · 2018-08-23 19:29:32Z

2

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(`...`);
            ...
        });

edited Aug 23, 2018 at 19:29

answered Apr 20, 2018 at 9:04

akraines

2,0552 gold badges14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3812429 Over a year ago

Thanks! So in the example above, how is this.onAfterScroll() different from the standard onScroll callback that you can provide to the <List> component directly?

akraines Over a year ago

It is only called after a scroll and scrolling has stopped

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related