React-window: wie man das Scrollen außerhalb der Liste steuert

Erstellt am 10. Apr. 2020  ·  3Kommentare  ·  Quelle: bvaughn/react-window

Hallo, in letzter Zeit verwende ich in meinem Projekt Reaction-Window, es funktioniert perfekt, wenn das Scroll-Ereignis von der List selbst abgehört wird Steuerung des Scrollens? Der Hauptteil des Codes sieht so aus:

<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>

Der Rendereffekt ist so, jetzt habe ich zwei Scrollbars

image

Hilfreichster Kommentar

Ich würde gerne ein Beispiel für so etwas wie WindowScroller im Reaktionsfenster sehen. Ich habe versucht, etwas mit dem Scroll-Listener auf dem Elternteil zu machen, aber am Ende habe ich ein Durcheinander.

Ich denke, dass ich hauptsächlich kommentieren werde, um zu folgen, falls jemand da draußen dies mit dem Reak-Fenster funktioniert und bereit ist, eine Codesandbox oder so etwas zu teilen.

Alle 3 Kommentare

Wenn Sie reaktiv-virtualisiert verwenden, können Sie dies mit der WindowScroller-Komponente tun. Zum Beispiel können Sie sich den Code ansehen, um zu verstehen, wie Sie dies im Reaktionsfenster tun können. Sie können auch Ereignis-Listener zu Ihrem übergeordneten Scroll-Element hinzufügen, overflow: hidden zu Ihrer Reaktionsfensterliste hinzufügen und dann den Listen-Scroll auf dem übergeordneten Scroll-Listener ändern.

Ich würde gerne ein Beispiel für so etwas wie WindowScroller im Reaktionsfenster sehen. Ich habe versucht, etwas mit dem Scroll-Listener auf dem Elternteil zu machen, aber am Ende habe ich ein Durcheinander.

Ich denke, dass ich hauptsächlich kommentieren werde, um zu folgen, falls jemand da draußen dies mit dem Reak-Fenster funktioniert und bereit ist, eine Codesandbox oder so etwas zu teilen.

Sie können die WindowScroller-Komponente von React-Virtualized verwenden:
https://codesandbox.io/s/vy620pkzzy

https://github.com/bvaughn/react-window/issues/30

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen