reactjs - 反応仮想化のスティッキーヘッダー

Question

List多数のアイテムをレンダリングするために、react-virtualizedのコンポーネントを使用しています。私の実装では、アイテムはセクション化されており、ユーザーが下にスクロールしても現在のセクションが表示されたままになるように、セクション ヘッダーを固定する必要があります。基本的に、スクロール位置が変更されたときにセクションヘッダーを破棄しないように反応仮想化する必要があります（ただし、他のアイテムを破棄し続けます）。これを今すぐ行う方法はありますか？あまりにもクレイジーでない限り、私はハッキングに対してオープンです。

Answer 1

私があなたの質問を正しく理解していれば、スプレッドシートのようなスティッキー ヘッダーが必要です。ScrollSyncコンポーネントでそれを行うことができます。 demo/docsをご覧ください。

ドキュメントに表示される例を次に示します。

import { Grid, List, ScrollSync } from 'react-virtualized'
import 'react-virtualized/styles.css'; // only needs to be imported once

function render (props) {
  return (
    <ScrollSync>
      {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => (
        <div className='Table'>
          <div className='LeftColumn'>
            <List
              scrollTop={scrollTop}
              {...props}
            />
          </div>
          <div className='RightColumn'>
            <Grid
              onScroll={onScroll}
              {...props}
            />
          </div>
        </div>
      )}
    </ScrollSync>
  )
}