こんにちは、最近プロジェクトでreact-windowを使用しています。スクロールイベントがリスト自体によってリッスンされている場合は完璧に機能しますが、リストをdiv / Tabでラップした場合、リストのスクロールバーを非表示にして親divを取得する方法スクロールの制御? コードの主要部分は次のようになります。
<div ref={outerRef} style={{overflow:'auto',height:'200px'}} onScroll={scrollCheck}>
<Tab
defaultActiveKey='tab1'
onChange={(key)=>{ console.log("onChange====",key)}}
>
<Tab.TabPane tab="hot" tabKey="tab1" >
<FixedSizeList
className={'demo'}
height={200}
itemSize={40}
itemData={itemData}
width={300}
outerRef={outerRef}
/>
</Tab.TabPane>
<Tab.TabPane tab="newest" tabKey="tab2" >
<div style={{background: '#368AD9', color: '#fff', padding: '15px' }}>
2...
</div>
</Tab.TabPane>
</Tab>
</div>
レンダリング効果は次のようになります。2つのスクロールバーがあります。
react-virtualizedを使用する場合は、WindowScrollerコンポーネントを使用してこれを行うことができます。 たとえば、そのコードを調べて、react-windowでそれを行う方法を理解できます。 また、イベントリスナーを親スクロール要素に追加し、overflow:hiddenをreact-windowリストに追加してから、親スクロールリスナーのリストスクロールを変更することもできます。
私はreact-windowでWindowScrollerのようなものの例を見たいと思います。 親のスクロールリスナーで何かをしようとしましたが、混乱してしまいました。
誰かがreact-windowで動作するようにこれを持っていて、コードサンドボックスか何かを共有することをいとわない場合に、私は主に従うようにコメントしていると思います。
あなたはreact-virtualizedからWindowScrollerコンポーネントを使うことができます:
https://codesandbox.io/s/vy620pkzzy
最も参考になるコメント
私はreact-windowでWindowScrollerのようなものの例を見たいと思います。 親のスクロールリスナーで何かをしようとしましたが、混乱してしまいました。
誰かがreact-windowで動作するようにこれを持っていて、コードサンドボックスか何かを共有することをいとわない場合に、私は主に従うようにコメントしていると思います。