有没有办法只有在 scrollTo 完成执行后才执行函数？

Question

我有一个<List> 组件。我正在构建一个功能：

1. 滚动到<List> 中的特定行。它通过使用 scrollToIndex 属性来实现。
2. 滚动到该行中的特定行。它通过document.getElementById('myId').scrollIntoView() 来实现这一点。

如何确保步骤 (2) 发生在步骤 (1) 之后？

注意：我已经尝试过onRowsRendered()，但看起来并不总是在scrollTo之后执行。

文档是here，但不幸的是我很卡。

---

编辑：如果以后有人遇到这个问题，我在 GitHub 存储库中得到了某种的答案：

您传入的 onScroll 属性绑定到 html onscroll 事件，该事件在您每次滚动时都会触发。 scrollToIndex 属性用于计算 scrollTop，然后在 html 元素上手动设置。

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

Answer 1

见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.
}

为了滚动到 DOM 中的特定 div (2)

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

你必须确保 dom 已经被渲染。

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