React-window: ScrollSyncとの互換性

まず、親切な言葉と正のフィードバックに感謝します。 これまでのところ、react-windowがうまく機能していると聞いてうれしいです！

ScrollSyncのようなコンポーネントがreact-windowに依存するスタンドアロンパッケージとしてリリースされる可能性があることに同意しますが、ウィンドウ処理のコアではないため、このプロジェクトに追加したくありません。

スクロール小道具についてのあなたの特定の質問に関しては、これは私がプロジェクトに加えたいと思う変更ではありません。react-virtualizedで使用した後、いくつかの重大な欠点があることに気づきました。 興味があれば、私は実際にReactブログにそれについて書きました：

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-派生-state.html＃anti -pattern-erasing-state-when-props-change

react-windowが提供する命令型スクロールAPIを使用して、同様の同期動作を実現できます。 小道具を渡すのではなく、コミットライフサイクルからこれらのメソッドを呼び出す必要があります。

うまくいけば、これは理にかなっていますが、そうでない場合はフォローアップの質問をしてください！

それは完全に理にかなっています。 提案をありがとう！ 私はそれを機能させました、そしてそれは実際にセットアップするのが非常に簡単です。 非常に簡単なので、スタンドアロンパッケージを保証することはできません。 たぶんドキュメントの例ですが、それは私が思うあなたの呼び出しです。 将来この問題に遭遇した場合に備えて、作業中のコードサンドボックスの例へのリンクをここに残しておきます。

https://codesandbox.io/s/y3pyp85zm1

TLDR-ヘッダーグリッドにrefを配置し、これをボディグリッドに配置します。

onScroll={({ scrollLeft }) => this.headerGrid.current.scrollTo({ scrollLeft })}

リンクをありがとう！ それはとても思慮深いことです。

2018年11月8日木曜日、午後1時9分Reagan Keeler < [email protected]は次のように書いています。

それは完全に理にかなっています。 提案をありがとう！ 私はそれを動かしました、
実際、セットアップは非常に簡単です。 とても簡単なので絶対にしない
スタンドアロンパッケージを保証します。 たぶんドキュメントの例ですが、それはあなたです
私が思うに電話してください。 作業中のコードサンドボックスの例へのリンクをここに残します
将来、他の誰かがこの問題に遭遇した場合に備えて。

https://codesandbox.io/s/y3pyp85zm1

TLDR-ヘッダーグリッドにrefを配置し、これをボディグリッドに配置します。

onScroll = {（{scrollLeft}）=> this.headerGrid.current.scrollTo（{scrollLeft}）}

—
開/閉状態を変更したため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/bvaughn/react-window/issues/86#issuecomment-437156749 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AABznTUunzEIs6bVQfVsz7T21L2-Pkkoks5utJ17gaJpZM4YVMd7
。

これに出くわした人には、このライブラリに移行したばかりのreact-virtualizedスクロール同期された上/右/下/左のフリーズしたスーパーグリッドがありました。 上記のソリューションは、他のライブラリでScrollSyncを使用するよりも、少なくともパフォーマンスが優れているとは言えませんが、それほど苦痛ではありません。

また、新しいuseRef反応フック（https://reactjs.org/docs/hooks-reference.html#useref）と非常によくペアになります。

const topRef = useRef();
const rightRef = useRef();
const bottomRef = useRef();
const leftRef = useRef();
...
<Grid
  onScroll={({ scrollLeft, scrollTop }) => {
    if (leftRef.current) {
      leftRef.current.scrollTo({ scrollTop });
    }
    if (rightRef.current) {
      rightRef.current.scrollTo({ scrollTop });
    }
    if (topRef.current) {
      topRef.current.scrollTo({ scrollLeft });
    }
    if (bottomRef.current) {
      bottomRef.current.scrollTo({ scrollLeft });
    }
  }}
  ...
/>

良い！ @ranneydを共有してくれてありがとう！

また、新しいuseRef反応フック（https://reactjs.org/docs/hooks-reference.html#useref）と非常によくペアになります。

ありがとう@ranneyd

実例を共有することは可能でしょうか？

@ranneydありがとう

スクロールバーの隠れたオーバーフローにより、グリッドの終わり近くで位置がずれます。

これを修正する方法について何か提案はありますか？

CodeSandboxの例

前もって感謝します

@carlosagsmendesそれはスクロールバーのせいです。 左側では、高さから高さからスクロールバーのサイズを引いたものにします。 デバイス間で一貫性を保つために、CSSを使用してスクロールバーのサイズを手動でハードコーディングしました。 コンテンツが非常に動的で、スクロールバーがある場合とない場合がある場合は、「num items * size items <width（これらの値はすべてそこにあるはずです）」のようにして、それに応じて高さを変更します。

デバイス間で一貫性を保つために、CSSを使用してスクロールバーのサイズを手動でハードコーディングしました。

FWIW dom-helpersパッケージには、現在のデバイスの幅を示す便利なscrollbarSize関数があります。 ハードコーディングよりも優れている可能性があります。

@bvaughnはい！ 私はそれについて言及するのを忘れました。 しかし、それは私たちにとってはうまくいきませんでした。 問題は、すでにハードコードされたスクロールバーを実行していて、それが混乱していたことだと思います。

ありがとう。 やってみます！

これは水平VariableSizeListで機能しますか？ 試しましたが、ブラウザがフリーズします。

onScroll={({ scrollLeft }) => this.headerGrid.current.scrollTo({ scrollLeft })}

それはVariableSizeGridでうまく機能しますが、私のヘッダーはスクロールで少し遅れています。

@ajaymoreなので、ヘッダーの遅れについて説明します。Macでスクロールホイールを使用すると、スクロール同期が

おもしろい事実：ブラウザでスクロールバーを手動で使用する場合（小さなものをドラッグして昔ながらの方法でスクロールするなど）、完全に正常に機能します。 補間機能は、スクロールホイール/トラックパッドのスワイプに組み込まれています

@ajaymoreなので、ヘッダーの遅れについて説明します。Macでスクロールホイールを使用すると、スクロール同期が

おもしろい事実：ブラウザでスクロールバーを手動で使用する場合（小さなものをドラッグして昔ながらの方法でスクロールするなど）、完全に正常に機能します。 補間機能は、スクロールホイール/トラックパッドのスワイプに組み込まれています

@ranneydこのような迅速な対応をありがとうございます。 私はそれが制限であることに同意します。 ほとんどのデバイスで問題なく動作するので、大きな問題にはなりません。

@bvaughn position: stickyで遊んだことがありますか？ しばらく見ていませんし、ブラウザのサポートが少ないことは知っていますが、サポートされているブラウザでそれを活用する方法があるのではないかと思います...

@ajaymoreと同じ問題があり遅くなります（前述のように、手動スクロールでは正常に機能します）。 私はPCでChromeを使ってテストしているので、それはMacだけの問題ではないようです...誰かがこの問題をなんとかして回避することに成功しましたか？

@alonrbar WindowsPCでも同じ問題が発生します。

私は実際に私のために働く回避策を見つけました。
一般的な考え方は、元のグリッドを非表示にしてonScrollイベントを盗み、それを使用して元のグリッドとその他の必要なグリッドを手動でスクロールする「シャドウグリッド」を作成することです。 パフォーマンスは少し低下しますが、すべてのグリッドが適切に同期されたままになるため、トレードオフを考慮する必要があります。

コードは次のようになります。

import styled from '@emotion/styled';
import * as React from 'react';
import { VariableSizeGrid, VariableSizeGridProps } from 'react-window';
import { SizeUtils } from '../utils';

export interface SyncableGridProps extends VariableSizeGridProps {
    mainGridRef: React.Ref<VariableSizeGrid>;
    shadowGridRef: React.Ref<VariableSizeGrid>;
    hideVerticalScrollbar?: boolean;
}

export class SyncableGrid extends React.PureComponent<SyncableGridProps> {
    public render() {
        const { height, width } = this.props;
        const {
            onScroll,
            mainGridRef: mainGridRef1,
            shadowGridRef: shadowGridRef1,
            ...mainProps
        } = this.props;
        const {
            children,
            style,
            overscanRowsCount,
            overscanColumnsCount,
            overscanCount,
            useIsScrolling,
            onItemsRendered,
            mainGridRef: mainGridRef2,
            shadowGridRef: shadowGridRef2,
            innerRef,
            outerRef,
            ...shadowProps
        } = this.props;
        return (
            <SyncWrapper
                style={{
                    height,
                    width
                }}
            >
                <MainGrid
                    {...mainProps}
                    style={Object.assign({}, style, {
                        overflowY: 'scroll'
                    })}
                    ref={mainGridRef1}
                />
                <GridShadow
                    {...shadowProps}
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0
                    }}
                    ref={shadowGridRef1}
                >
                    {() => null}
                </GridShadow>
            </SyncWrapper>
        );
    }
}

// ---------------- //
//      styles      //
// ---------------- //

const SyncWrapper = styled.div`
    position: relative;
    overflow: hidden;
`;

export interface MainGridProps extends VariableSizeGridProps {
    hideVerticalScrollbar?: boolean;
}

export const MainGrid = styled(VariableSizeGrid) <MainGridProps>`
    overflow-y: scroll;
    box-sizing: content-box;
    ${props => {
        if (!props.hideVerticalScrollbar)
            return '';
        const paddingDir = (props.theme.dir === 'rtl' ? 'padding-left' : 'padding-right');
        return `${paddingDir}: ${SizeUtils.scrollbarWidth}px;`;
    }}
`;

export const GridShadow = styled(MainGrid)`
    opacity: 0;
`;

次に、別のファイルで：

<SyncableGrid
    mainGridRef={this.firstGridMain}
    shadowGridRef={this.firstGridShadow}
    onScroll={this.handleFirstGridScroll}
    // other props omitted for bravity...
>
   // children omitted for bravity...
</SyncableGrid>
<SyncableGrid
    mainGridRef={this.secondGridMain}
    shadowGridRef={this.secondGridShadow}
    onScroll={this.handleSecondGridScroll}
    // other props omitted for bravity...
>
   // children omitted for bravity...
</SyncableGrid>

private handleFirstGridScroll = (e: GridOnScrollProps) => {
    const { scrollTop, scrollLeft } = e;

    // synchronize self
    if (this.firstGridMain.current) {
        this.firstGridMain.current.scrollTo({ scrollTop, scrollLeft });
    }

    // synchronize other grid
    if (this.secondGridMain.current) {
        this.secondGridMain.current.scrollTo({ scrollTop, scrollLeft });
        this.secondGridShadow.current.scrollTo({ scrollTop, scrollLeft });
    }
}

@alonrbarこれは魅力的です！ すぐに試してみます。

シャドウグリッドが実際のグリッドの上にあるように見えますね。 もしそうなら、「実際のグリッド」のクリックイベントは機能しませんか？ クリックイベント+ x / y座標を使って少しハッキーなことをして、どういうわけかそれをメイングリッドに適用できると思います。

また、 @ barbalex re：Windowsでも失敗します

実はクロームフラッグかもしれません。 chrome：// flagsに何かがあるかどうかを確認し

この問題は確かに、ブラウザのアニメーションフレームよりも速くスクロールが「スムーズ」になることに関連しているようです。 懸念がある場合は、純粋にパフォーマンス/ラグの問題であり、非常に基本的なスクロール同期の実装（1つのdivのスクロールで別のdivのスクロール位置を設定する）を作成して、同じ問題が発生するかどうかを確認してください。 たぶん、犯人としてのReactを排除するために、純粋なバニラJSでそれを行うことさえあります

ああ@ranneydあなたは正しいですそれはクリックイベントをブロックします...それについてもう少し考える必要があります...

chrome：// flagsのスレッドスクロール機能は大きな影響を与えていると思います。オフにすると、マウスホイールでのスクロールがスクロールバーでのスクロールとほぼ同じくらいスムーズになります。

@alonrbarこれはどう

メイングリッドにスクロールハンドラーを追加します。 その中で、実際のスクロールを防ぐためにe.preventDefault();などを実行します。 次に、イベントを見て、スクロールされた量を把握します。これにより、他の同期されたものが移動しますが、それを使用して、同じ要素を手動でスクロールします。 したがって、Aをスクロールしてからその情報を使用してBをスクロールする代わりに、Aのスクロールをインターセプトしてキャンセルし、それを使用してBとA自体をスクロールします。 それはうまくいくでしょうか？

私はコンピューターでテストしているわけではありません。 かなりハッキーですが、私は働くことができました。 @bvaughnの考え？

@barbalexあなたは正しいです、それは私にとっても機能しますが、すべてのユーザーにChromeフラグのオンとオフを切り替えることはできません😔

@ranneyd調べて、ソースコード（リンク）を少しいじったところですが、

@alonrbarええ、ユーザーにこれを行うように依頼しても機能しません。 試してみたい場合は、直接リンクを与えることができます： chrome：// flags /＃disable -threaded-scrolling

@alonrbarええ、これは良くありませんが、すでに一緒にハッキングしているグリッドに適用するだけなら、

スクロールホイールだけですよね？ 矢印キーもそれを実現しますか？

これはここで受け入れられた回答からの抜粋です： https ：

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  document.addEventListener('wheel', preventDefault, {passive: false}); // Disable scrolling in Chrome
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

ご覧のとおり、処理する必要のあるイベントがいくつかあり、そうすることで起こりうる結果を検討する必要があります。

今のところ、これを解決するためにこれ以上時間を費やすことができないため、非仮想ソリューションを使用することにしました（これも完璧ではありませんが、私のユースケースには適しています）。 私が使用しているコードはここにあります（ react-windowをラップするの

@alonrbarええ私はSOソリューションがかなり

しかし、あなたの解決策は非常に興味深いと思います。 私はそれを自分で試して、仮想化されたテーブルで機能させることができるかどうかを確認します。

@alonrbarなので、実際に絶対ポジショニングを使用する非仮想化実装を作成しました。 スクロールするのは外側のコンテナだけです。 スクロールすると、内部要素を絶対配置するために使用される左上の値が更新されます。 だから、私が見つけたscrollToやscrollTop = ...は、私に多くの悲しみを引き起こしていませんでした。 その上、スクロールバーは常にグリッド全体の外側にあります。

私が作ったこのものは、すべての面に「凍結されたヘッダー」を動的に持つことができます。 これは非常に大まかな例/ pocです。

明らかに、深刻な問題である仮想化が欠けています。 残念ながら、このライブラリからグリッドをラップできるかどうかはわかりません。このライブラリは基本的にスクロールで実行され、内部グリッドのスクロールが不要になるためです。 次のステップが何かわからない。

https://codesandbox.io/embed/non-virtual-scroll-synced-table-ot467

このlibを促進するのと同じ仮想化ロジックをこれに適用できると思います。

@ranneyd非常にクールな実装！

私は動的グリッド構成が好きです:)

しかし、最も重要なのは、スクロールの代わりに絶対位置を使用するという考えが、この問題を解決するための鍵となる可能性があることです。 別のdivを導入、新しい可能性が開かれると思います。

react-windowのrenderメソッドにフックできる場合は、459行目以降を実装に置き換えることができる場合があります。 次に、onscrollイベントをフックして、必要に応じてその効果を無効にすることができます（スクロールバーは常に移動しますが、コンテンツを制御して変更されないようにすることができます）。

@alonrbarなので、実際に仮想化アルゴリズムを再実装しました。 それほど良くはありませんが、このグリッドが実際の仮想化に到達したときにソースコードを見ると、基本的に同じアルゴリズムです。 ただし、パフォーマンスは実際にはまともです。 ラグなしで200x200グリッドに到達でき、ほんの少しだけで500x500グリッドに到達できます。 上司がこれ以上これに取り組んでくれたら、あなたが提案したようにレンダリングメソッドの実装を試みます。これはおそらく実際にはかなり簡単です。

私が作ったグリッドに興味があれば、どこかに投稿できます。 あなたがそれを取り、このライブラリに接続したい場合は、私のゲストになります😏

@ranneydはいあなたが作った仮想化ソリューションを見たいです。 私がそれを使うかどうかはわかりませんが、それは確かに面白いでしょう:)

また、私は今日あなたのコードを使用して、私が提案したようにrenderメソッドへの変更を実装しようとしましたが、コードを読み直した後、あなたが思ったようにスクロールを実際に切断していないことに気付きました。 つまり、スクロールバーとonscrollイベントは、実際のコンテンツスクロールと切り離せないということです。 私はあなたのアイデアをさらに一歩進めて、真に切り離されたスクロールを実装しました：

https://codesandbox.io/embed/absolute-position-scrolling-1u7vj

コードを見ると、 top leftプロパティとContentコンポーネントから削除すると、スクロールバーがあってもコンテンツがスクロールされないことがわかります。
この実装を使用して、 onscrollイベントを無視し、複数のグリッドを手動で同期することが可能になったと思います。 しかし、もちろんそれはもう少し作業が必要なので、次回まで待たなければなりません...

この議論に興味を持ったので、2つのスクロール同期react-window Gridをreact-virtualized MultiGridと比較するプロジェクトをセットアップして、perfがどのように比較されるかを理解できるようにしました。 ：
https://github.com/bvaughn/react-window-vs-react-virtualized-synced-grids

それぞれの使い方をできるだけ似たものにするように心がけました。 いくつかの最初の観察：

• react-windowは、DEVモードでは著しく遅く見えますが、本番ビルドでは少し速く/応答性が高くなります。 （ここで私の側の偏見を排除するのは難しいです。生産の違いは小さいです。）
• また、react-windowは、スクロールイベントが最初にアクティブグリッドを更新し、次にカスケード更新を介してパッシブグリッドを更新するため、より多くのコミットを実行します。 現在のonScroll （コミット中に呼び出される）ではなく、「ネイティブ」（React）スクロールイベントハンドラー（Reactのバッチ更新内で呼び出される）の受け渡しをサポートするために、 Gridにパッチを作成しました。段階）。 これは、ローカルでテストしたときにかなり有望な変更のように見えます。これは、個別のカスケードレンダリングを回避するため、デフォルトのonScrollタイミングを変更するだけかもしれません。

@bvaughn divA- > onScroll-> setState->

目標は常にJavaScriptを可能な限り高速にして、スクロールを管理するスレッドに追いつくことです。

私は確かに反応状態を回避せず、onScrollハンドラー内でref.scrollTopを設定しました

明確にするために、これは私のレポが行っていることでもありません。 アクティブグリッドと同じ（Reactでラップされた）イベントハンドラーのパッシブグリッドでスクロールオフセットを設定しているだけなので、Reactは更新を単一のrender + commitにバッチ処理します。 正直に言うと、これはおそらく大きな違いにはなりません。

@ranneydと@bvaughnがこれまでの私の観察をあなたと共有しています：

1. 多くの実装はデスクトップブラウザで十分に機能しますが、私の主な使用例は実際にはモバイルデバイスであり、パフォーマンスに大きな違いが見られます。

2. 2つの単純な非仮想グリッドの同期は非常にうまく機能します（100％完璧ではありませんが、モバイルでも十分に近いです）。 これは私の素朴でありながら機能している実装であり、実際に動作することを確認するためのテストケースです（ yarn storybook ）。

3. 「制御された」スクロールを使用すると（このコメントで提案https ：

   それでも、「制御された」戦略が、単一の仮想リストでこの問題を解決するために何らかの形で機能するかどうかを確認したいと思います。

4. 2人がすでに提案したように、 _callPropsCallbacksを_onScrollハンドラーに直接移動すると、同期の遅延を最小限に抑えることができるのではないかと考えていました。 編集-今試してみましたが、実際には役に立ちません😞

5. いずれにせよ、IMHOは仮想化ロジックをコンポーネントの残りの部分（おそらくフックでさえも）から分離することをお勧めします。そうすれば、レンダリングとスクロールの要素を別々に処理し、簡単に比較でき、実行時にそれに基づいて切り替えることもできます。コンポーネントの小道具。 また、このロジックをエクスポートして、ユーザーが同じロジックに基づいてカスタムコンポーネント（このコメントの@ranneydソリューションなど）を実装できるようにします。

考え？

@alonrbar絶対測位を行う私のソリューションは、スクロールを実行するグ​​リッドではないため、約300x300までは非常にうまく機能し、少し遅くなります（100％の時間同期を維持し、スクロールは少し遅れます）。 より大きなサイズでは、それは大きな配列を処理/マッピングしているだけだと思います。 いくつかの最適化があると思います
しかし、私はそれを行うことができますが、それが私のかなり単純な仮想化の実装ほどスクロール同期と関係があると完全に確信しているわけではありません。 たとえば、より多くのキャッシュを実行できます。また、レンダリング関数の呼び出しをまったく回避するために、セルを仮想化する必要があるかどうかを計算できます（そして、おそらくそれをより適切にキャッシュします）。

私はモバイルで何もテストしていません。 少し試してみるためのコードをいくつか提供します。

私は本当に@bvaughnテストを見たいです。 彼は、ネイティブスクロールに直接フックすると修正されると言いますが、そうではないと言います。 自分で見たいです。

仮想化ロジックをフックまたは独立した関数に取り込む限り、ロジックは本質的にビューに接続されているため、かなり注意が必要です。 また、パフォーマンスの調整の多くには、1つのフックまたは関数にカプセル化するのが難しい、または少なくとも同じパフォーマンスが得られる程度まで、キャッシュとメモ化が含まれているようです。 しかし、私は自分が持っているものを見て、どれだけのロジックを引き出すことができるかを見ていきます。

PS：
おそらくうまくいかないと私が思った1つのことは、非難のようなこと+ css遷移を行うことです。 100ミリ秒ごとに1つのスクロールイベントのみを実行し、動きをアニメーション化すると、見栄えが良くなる可能性があります。 また、応答性が大幅に低下しているように見える場合もあります。 これは、World of Warcraftのやり方と似ています（ラグや待ち時間が長い場合は、キャラクターを直線で動かし、実際に行った場所の情報を取得したら修正します）。

私は本当に@bvaughnテストを見たいです。 彼は、ネイティブスクロールに直接フックすると修正されると言いますが、そうではないと言います。 自分で見たいです。

：smile：余分な不要なレンダリングとDOMミューテーションを回避すると言っただけです。 実際のパフォーマンスにどの程度の影響があるのか​​は私にはわかりません。 とはいえ、全体的に前向きな変化のように見えます。

@alonrbar @bvaughn実際にコードを文書化する必要がありますが、最新バージョンは次のとおりです。

https://github.com/ranneyd/synced-table

@alonrbar @bvaughnだから、これが私が今発見した楽しいことです：

私のソリューションは、MacBook画面のChrome75では機能しません。 私の同僚がクロムを更新していなかったとき、それは機能しました。 彼らが外部モニターを使用する場合、それは機能します。 彼らのラップトップ画面では、それは遅れています。
😩

うーん...リフレッシュレートやスケーリングなど、外部モニターとはいくつかの違いがあります。 「うまくいかない」と言うとき、具体的にはどういう意味ですか？

私の悪い。 つまり、スクロールが同期されなくなったということです。 私のリポジトリのクローンを作成して実行すると、外部モニターとラップトップ画面を比較できます。 モニター上では、それらは完全に同期しています。 ノートパソコンの画面では、ヘッダーがちらつきます（スクロール要素と同じ速度で更新しないでください）。

私は実際に諦め、 position: sticky試してみました。 それは実際に機能しています。 ブラウザのサポートは100％ではありませんが、実際には1年前よりもはるかに優れています。

動作する可能性のある非ポリフィルポリフィルであるこのlibがありますが、ターゲットとするブラウザーはたまたまこの機能をサポートしています。
https://github.com/dollarshaveclub/stickybits

@ alonrbar @ bvaughnは最新バージョンです。 position: stickyます。 READMEで少し説明します。 コードはまだ文書化する必要があります。

https://github.com/ranneyd/sticky-table

私のソリューションは、MacBook画面のChrome75では機能しません。 私の同僚がクロムを更新していなかったとき、それは機能しました。 彼らが外部モニターを使用する場合、それは機能します。 彼らのラップトップ画面では、それは遅れています。
😩

@ranneyd今日、これはフレームレートに関連しているのではないかと思いました。 外部モニターのフレームレートは、たとえば30 fpsである可能性があります。その場合、ブラウザーがディスパッチする「スクロール」イベントは少なくなると思います（ほとんどのブラウザーはフレーム/ペイントごとに1つしかディスパッチしないと思うため）。 たぶんこれが、外部モニターでラグがより目立つ理由ですか？

@bvaughnそれはそれでなければならないと思います。 OSは60hzを送信していると言っており、モニターの仕様は60hzと言っていると思いますが、誰かが嘘をついていても驚かないでしょう😂

@ranneyd申し訳ありませんが、現在ご利用いただけないため、ソリューションを適切に確認できませんでしたが、一目見ただけで、かなりきれいに見え、 useVirtualを作成したことに気付きました。
どういうわけかreact-windowプルリクエストを作成し、そこで使用して、レンダリングロジックをプラグインできる何らかのrenderTableメソッドを公開できれば素晴らしいと思います。 このようにして、ライブラリは、react-windowを置き換えるのではなく、ラップするだけで済みます。 このアプローチを活用して、すでにかなりの戦闘テストが行​​われ、広く普及しているreact-window内の問題を解決できれば望ましいと思います。

別の問題として、 scrollToが直接DOM操作を使用する場合（おそらく状態の設定に加えて、いずれにしてもそうする前に）、2つのテーブルを同期した結果がよりスムーズになると思います。 私が間違っていなければ、 @ bvaughnもこの方向に何かを提案していました。

@ranneydあなたのスティッキーテーブルソリューションは本当に素晴らしく見えます、そして私はそれを使うことができてとてもうれしいです。 npm使用可能なAPIをリリースすることを検討しますか？

@bvaughn @ranneyd

それで、かなりの時間が経った後、私は最近この問題に戻ってきました。 ライブラリとrecyclerlistviewおよびreact-virtual-gridの両方からのコードとアイデアを使用して、最終的に私が望む動作、つまり、デスクトップとモバイルの両方でうまく機能する固定の行と列を持つ高性能グリッドを実現することができました。デバイス（空/白血球のないスムーズなスクロール）。

そのTLDRは、スティッキーポジショニングと一緒にリサイクルを使用することです。最も興味深いコードは、このメソッドで見つけることができます。

さらに別の解決策を書く動機についてのクレジットなどがここにあります。 ありがとう！

将来この問題に遭遇した場合に備えて、作業中のコードサンドボックスの例へのリンクをここに残しておきます。
https://codesandbox.io/s/y3pyp85zm1

完全に右にスクロールするまでは非常に便利です。そうすると、ヘッダーがコンテンツとずれます（スクロールの垂直スクロールバーの幅によって）。
万が一、その解決策を見つけましたか？
ありがとう

将来この問題に遭遇した場合に備えて、作業中のコードサンドボックスの例へのリンクをここに残しておきます。
https://codesandbox.io/s/y3pyp85zm1

完全に右にスクロールするまでは非常に便利です。そうすると、ヘッダーがコンテンツとずれます（スクロールの垂直スクロールバーの幅によって）。
万が一、その解決策を見つけましたか？
ありがとう

完全開示：私は実際に自分のバージョンを最初から作成しました。 このライブラリに大きく基づいた独自の仮想化があります。 私がこれを行った理由は、MacBookと、スクロールのアニメーションがJSとは異なるタイミングで発生する特定のChromeフラグに問題があるためです。 ScrollSyncを使用するには、渡される関数呼び出しが多すぎて、遅すぎました。 基本的に、コアにスティッキーヘッダーを使用してライブラリを作り直す必要がありました（このスレッドで前に述べたようにposition: sticky使用しません

とはいえ、この問題を回避する方法は、 overflow: scrollを使用してスクロールバーを強制し、最後のセルにそのパディングを追加するか、スクロールバーがあるかどうか（およびその幅）を動的に判断することです。 refとその中に非表示のdivを配置し、スクロールバーのサイズを測定し、DOMノードを削除します。

overflow-y: overlayを使用して、スクロールバーをオーバーレイしました。 残念ながら、Webkitブラウザでのみ機能します。

情報をありがとう。 スティッキーヘッダーは非常に一般的なニーズであるように思われるため、react-windowにスティッキーな最初の行オプションを追加するだけで、多くの場合、react-virtualizedの代わりになります。 そう思いませんか？

@ranneydありがとう

スクロールバーの隠れたオーバーフローにより、グリッドの終わり近くで位置がずれます。

これを修正する方法について何か提案はありますか？

CodeSandboxの例

前もって感謝します

パーティーに遅れましたが、leftRefに1行を追加し、そのオーバーフローを非表示にすると、基本的にpbが解決されます。 （leftRef->メイングリッドを同期する必要もありませんでした

  const headerRef = React.useRef();
  const leftRef   = React.useRef();

  return <Box classes={{
            root:classes.tableContainer
          }}>
      <AutoSizer>
        {({ height, width }) => (<>
        {/*---------------- LA TABLE -------------*/}
          <Grid
            columnCount={1000}
            columnWidth={100}
            height={height}
            rowCount={1000}
            rowHeight={35}
            width={width}
            onScroll={({ scrollLeft, scrollTop }) => {
              if (leftRef.current) {
                leftRef.current.scrollTo({ scrollTop });
              }
              if (headerRef.current) {
                headerRef.current.scrollTo({ scrollLeft });
              }
            }}
          >
            {({ columnIndex, rowIndex, style }) => (
              <Box style={style} classes={{root:classes.cell}}>
                Item {rowIndex},{columnIndex}
              </Box>
            )}
          </Grid>
          {/*---------------- HEADER -------------*/}
          <Grid
            ref={headerRef}
            outerElementType={React.forwardRef((props, ref) => (
              <div ref={ref}  {...props} style={{...props.style,position:"absolute",overflow:"hidden",top:0,right:0,left:150}} />
            ))}
            columnCount={1001}  /*columns count +1 for scroll problems*/
            columnWidth={100}
            height={60}
            rowCount={1}
            rowHeight={60}
            width={width}
          >
            {({ columnIndex, rowIndex, style }) => (
              <Box style={style} classes={{root:classes.headerCell}}>
                Header {rowIndex},{columnIndex}
              </Box>
            )}
          </Grid>  
          {/*---------------- LEFT COL -------------*/}
          <Grid
            ref={leftRef}
            outerElementType={React.forwardRef((props, ref) => (
              <div ref={ref}  {...props} style={{...props.style,position:"absolute",overflow:"hidden",top:60,left:0}} />
            ))}
            columnCount={1}
            columnWidth={150}
            height={height}
            rowCount={251} /** add 1 for scroll problems at the end */
            rowHeight={140}
            width={150}
          >
            {({ columnIndex, rowIndex, style }) => (
              <Box style={style} classes={{root:classes.headerCell}}>
                Left {rowIndex},{columnIndex}
              </Box>
            )}
          </Grid>  
        </>)}
      </AutoSizer>
    </Box>