React-Virtualized ScrollSync：如何设置初始 scrollTop 值？

Question

我正在使用 react-virtualized ScrollSync 组件来同步一对固定 headers 的滚动 — 与 example in the docs.

非常相似

我的问题：是否可以为 ScrollSync（或其 children）提供初始 scrollTop 值？我意识到更好的方法是在控制滚动位置的 Grid 组件上使用 scrollToRow — 对于它的价值，我 am为此目的使用 scrollToColumn。但是因为在垂直方向上，我只渲染了一个非常高的单元格，scrollToRow 没有提供所需的保真度。

我确实意识到这是对网格组件的一种略微拙劣的使用，但它作为一个水平的、无限加载的滚动条工作得很好，同时允许我 re-use 一个现有的组件。如果我可以设置一个初始 scrollTop，我会很高兴。

谢谢。

Answer 1

不幸的是，如果没有一点修改，目前不支持此功能。

首先，破解的原因：滚动偏移在 ScrollSync 的一个方向上流动（主 Grid 同步 Grids）。这意味着即使 ScrollSync 接受默认的 left/top 偏移量作为道具——它们也会被主要 Grid 的第一次渲染覆盖。我认为这可能是避免反应虚拟化内部丑陋的正确做法。

但是，如果您愿意，可以像这样在应用程序代码中解决它：

class YourComponent extends Component {
  render () {
    // These are arbitrary
    const defaultScrollLeft = 300
    const defaultScrollTop = 500

    return (
      <ScrollSync>
        {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => {
          if (!this._initialized) {
            scrollLeft = defaultScrollLeft
            scrollTop = defaultScrollTop

            this._initialized = true
          }

          return (
            <div>
              <Grid
                {...otherSyncedGridProps}
                scrollLeft={scrollLeft}
              />
              <Grid
                {...otherMainGridProps}
                onScroll={onScroll}
                scrollLeft={defaultScrollLeft}
                scrollTop={defaultScrollTop}
              />
            </div>
          )
        }}
      </ScrollSync>
    )
  }
}

React-Virtualized ScrollSync：如何设置初始 scrollTop 值？

React-Virtualized ScrollSync: How to set an initial scrollTop value?

react-virtualized