React-Virtualized ScrollSync: как установить начальное значение scrollTop?

Question

Я использую компонент виртуализованного взаимодействия ScrollSync для синхронизации прокрутки пары фиксированных заголовков - очень похоже на example in the docs.

Мой вопрос: можно ли указать начальное значение scrollTop на ScrollSync (или его детей)? Я понимаю, что лучшим способом сделать это будет использование scrollToRow на компоненте Grid, который контролирует положение прокрутки - для чего он стоит, I am с использованием scrollToColumn для этой цели. Но поскольку, по вертикали, я делаю только одну очень высокую ячейку, scrollToRow не обеспечивает необходимую точность.

Я действительно понимаю, что это слегка причудливое использование грид-компонента, но все это прекрасно работает как горизонтальный, бесконечно загружающий скроллер, позволяя мне повторно использовать существующий компонент. Если бы я мог просто установить начальный scrollTop, я был бы золотым.

Спасибо.

Answer 1

К сожалению, в настоящее время это не поддерживается без какого-либо взлома.

Во-первых, причина взлома: прокрутка смещает поток в одном направлении с ScrollSync (основной Grid для синхронизации Grid s). Это означает, что даже если ScrollSync принимали смещения влево/вправо по умолчанию в качестве реквизита - они были бы переопределены первым рендерингом основного Grid. I думаю, это, вероятно, правильная вещь, чтобы избежать уродства внутри реакционно-виртуализированного.

Однако вы могли бы работать вокруг него в коде приложения, как это, если вы хотите:

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> 
    ) 
    } 
}