問題タブ [react-window]

「同期」された2つのスクロール可能な要素（react-windowから）が並んでいます。一方をスクロールすると、もう一方もスクロールします。

左の要素の垂直スクロールバーを非表示にして、テーブルのように 1 つの要素として表示したいと考えています。そして、右の要素のスクロールバーを表示させます。

以下に例を示します: https://codesandbox.io/s/focused-fire-4j5ro

::-webkit-scrollbar は、保持する必要がある水平スクロールバーも非表示にするため、使用できません。

私はこのトリックを試しました：スクロールバーを非表示にしますが、まだスクロールできますが、react-windowでは機能しないようです。

このユースケースのアイデアはありますか?

ありがとうございました ！

スクロール時に行の仮想化を行いたい（スクロール時にデータが表示されるようにするため）

しかし、スクロールすると、ひどいグリッチが表示されます

何が問題なのか教えてください。

プロジェクト - male-wind.surge.sh

テーブルを持つコンポーネント (react-window がそこで使用されます):

このソリューションを使用しようとしましたが、役に立ちません - https://github.com/bvaughn/react-virtualized/issues/1327

React Virtualized を使用して、次の機能を持つアイテム リストをウィンドウ表示しています。1) 任意のアイテムをクリックすると、アイテムの詳細を更新できる詳細パネルが表示されます。リストに戻ると、リストのアイテム セルに詳細が表示されます。彼は多くの詳細を追加して大きくしたり、詳細を削除してサイズを縮小したりできます

2) 彼はアイテムを削除したり、特定の詳細または詳細なしで別のアイテムをリストに追加したりできます。

動的な高さがサポートされているため、CellMeasurer は私の要件を満たします。しかし、私はそれで次の問題を抱えています

1）最初にリストが初めてマウントされると、最初のいくつかのアイテムが正しく測定されて表示されますが、最後までスクロールするとすぐに、アイテムが互いに重なって表示されます（ポジショニングが正しくない、defaultHeightが適用されていると推測しています未測定のセルに)。これは、リストが再レンダリングされるとすぐに正常に機能します。2) また、アイテムの詳細を更新しているときに、リストが新しい高さ調整で更新されません。

どこかで私の実装が間違っていると確信していますが、多くの時間を費やして頭を悩ませてきました。これを修正するためにここで何ができるか教えてください

また、次のように componentDidUpdate でアイテムの再測定を手動でトリガーしています()

メインの親では、リストが更新されるたびにリストの高さを再計算し、次のように forceupdate をトリガーしています