フリー仮想化ウィンドウスクロールバーをフリーズしたヘッダーとフッターで使用する

Question

反応仮想化WindowScrollerとCellMeasurerを使用して100個のサンプルレコードをスクロールしています。

今

、私はそれの上方と下方（フレックスを使用して）、冷凍ヘッダーとフッターで内容ペインに、このコンポーネントを配置、反応する仮想化は、最初のページを超えた追加データにもたらすことはありません。

私のコンテナページの構造が作成反応するアプリテンプレートと同じです：

：

<div className="App"> 
    <div className="App-header" /> 
    <div className="App-intro" /> 
    <div className="App-footer" /> 
</div> 

、ここでは、私は、ヘッダーとフッターを凍結するために使用するCSSです

html, body, #root { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
.App { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
} 
.App-header, .App-footer { 
    flex-shrink: 0; 
} 
.App-intro { 
    flex-grow: 1; 
    overflow-y: auto; 
} 

FWIW、the official WindowScroller exampleは、フレックスを使用してフリーズヘッダーを実行しますが、可能性としては試してみます。私はそれを私の最後に複製できません。

私はこれに一日を費やした後、私の知恵の終わりです。このフレックスレイアウトを機能的なウィンドウスクロールにするためのポインタは、本当に本当にありがたいです。

Answer 1

（codesandbox.io/s/52j0vv936p)にリンクしたCodeSandboxでは、ウィンドウの「スクロール」イベントはWindowScrollerに届きません。これは、windowが実際にスクロール可能なものではなく、むしろ中央の「ボディ」部分だからです。それが必要な場合は、WindowScrollerをまったく使用する必要はなく、削除する必要があります。

左の唯一の問題は、AutoSizerの親の1つが正しい高さを持たないため、AutoSizerに有効な高さが表示されないことです。スタックオーバーフローの便宜のために、関連するビットを次に示します。

私のオートシザ設定の高さは0ですか？

AutoSizerは親を塗りつぶしますが、親は伸びません。これはフレックスボックスレイアウトの問題を防ぐために行われます。 AutoSizerが高さ（または幅）0を報告している場合、親要素（またはその親の1つ）の高さが0になる可能性があります。これをテストする簡単な方法は、スタイルプロパティ（例：background-color: red;）を親が正しいサイズであることを確認します。 （たとえば、あなたは親にheight: 100%またはflex: 1を追加する必要があります。）あなたのサンドボックスに

Here is a diffを私がしてhere is a fixed Code Sandbox demo話しているかを示しています。