React-window: Windowscroller

WindowScrollerは、コンポーネントの保守に苦労したものの1つでした。 私はそれの有用性を理解していますが、私は別のものを維持することを約束することに興味があるかどうかわかりません。 代わりに、可能であれば、react-windowの上にこの機能を実装する外部コンポーネントを構築（および個別に公開）することをお勧めします。

そのようなコンポーネントが存在する場合は、それらがどれほど複雑になるかに応じて、react-windowにいくつかの変更を加えてサポートすることをいとわないかもしれません。

おそらく、誰か（あなた？）がこのライブラリに直接追加するPRを提出することから始めるのがよいでしょう。そうすれば、個別に公開することがどれほど複雑になるかがわかります。

ウィンドウスクローラーが本当に必要な場合は、react-virtalizedの1つを使用できます。

WindowScroller
https://codesandbox.io/s/vy620pkzzy

動的コンテンツを含むWindowScroller
https://codesandbox.io/s/xvl23p7okp

何もするつもりはないので、今のところこの問題を解決するつもりだと思います。長期計画は（少なくとも私の考えでは）とにかく別のモジュールでした。 それでも私は提案を見て喜んでいます！

Hu @ PascalSenn 、react-virtualizedのWindowScrollerを使用していますか？ 前もって感謝します

こんにちは@PascalSenn 、私はグリッドであなたのアプローチを試みていますが、それは私のために働いていません。 手伝ってくれますか？

前もって感謝します

@carlosagsmendes
問題を修正するには、グリッドの場合、リスト以外の別のパラメータ署名を提供する必要があることを説明しているドキュメントにフォールバックする必要があります
scrollTo({scrollLeft: number, scrollTop: number}) => https://react-window.now.sh/#/api/FixedSizeGrid

これがお役に立てば幸いです...
注： @PascalSennのCSSトリックに注意してください

// This height will override the window.innerHeight set in JSX : height={window.innerHeight}
.window-scroller-override {
  height: 100% !important;
}

ヘルプを提供するために、ここにグリッドが機能するサンプルがあります： //codesandbox.io/s/wq301o8qz7

ウィンドウスクローラーが本当に必要な場合は、react-virtalizedの1つを使用できます。

WindowScroller
https://codesandbox.io/s/vy620pkzzy

動的コンテンツを含むWindowScroller
https://codesandbox.io/s/xvl23p7okp

参考までに、これらの例を検討している人は、 window.innerWidthとwindow.innerHeightはスクロールバーの存在を考慮していないことに注意してください。 ブラウザ/デバイス（およびこれらが表示されるのに十分なコンテンツであるかどうか）によって異なるスクロールバーのサイズを差し引く必要があります。

@bvaughn 、ローリング速度を制御できますか？スライドが速すぎて要素なしでレンダリングされるのを防ぐために、仮想リストが非常に必要です

@kgregory 、これがInfiniteLoaderどのように機能するかについてのアイデアはありますか？ 提供する例では、 WindowScrollerのonScrollは、外部スコープで作成され、 Listに適用されるInfiniteLoaderを使用する場合、 InfiniteLoader子コールバックは、引数からrefを取得し、_that_をListます。 両方の要件に同じ参照を使用することは不可能のようです。 私がこれまで試したすべてがうまくいきませんでした。

@mrdanimalは、InfiniteLoaderからの参照でリスト参照を参照するためにこの回答を参照してください： //github.com/bvaughn/react-window/issues/417#issuecomment -583867845

@PascalSennのコードサンドボックスでいくつかの問題を修正することができましたが、プロジェクトに関連するいくつかのことをテストするために、自分で2つ作成することになりました。 誰かに役立つ場合に備えて、ここに投稿します。

FixedSizeListの例： https ：
VariableSizeGridの例： https ：

DynamicSizeListでは機能しないようです。 誰かが回避策を知っていますか？ それは私に多くのトラブルを救うでしょう