React-window: Windowscroller

WindowScroller war eine der schmerzhaftesten Komponenten. Ich sehe die Nützlichkeit davon, bin mir aber nicht sicher, ob ich mich dazu verpflichten möchte, eine andere beizubehalten. Ich würde es stattdessen vorziehen, wenn möglich, eine externe Komponente zu erstellen (und separat zu veröffentlichen), die diese Funktionalität über dem Reaktionsfenster implementiert.

Ich könnte bereit sein, ein paar Änderungen am Reaktionsfenster vorzunehmen, um eine solche Komponente zu unterstützen, falls vorhanden, je nachdem, wie komplex sie sein würde.

Vielleicht wäre ein guter Anfang für jemanden (Sie?), Eine PR einzureichen, die sie direkt zu dieser Bibliothek hinzufügt - damit wir sehen können, wie kompliziert es sein kann, separat zu veröffentlichen.

Wenn Sie wirklich einen Fenster-Scroller benötigen, können Sie einfach den von React-Virtalized verwenden.

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

WindowScroller mit dynamischem Inhalt
https://codesandbox.io/s/xvl23p7okp

Ich denke, ich werde dieses Problem vorerst schließen, da ich nicht vorhabe, Maßnahmen zu ergreifen - und der langfristige Plan (zumindest in meinen Augen) war sowieso ein separates Modul. Ich würde mich trotzdem gerne einen Vorschlag ansehen!

Hu @PascalSenn , verwenden Sie den WindowScroller von

Hallo nochmal @PascalSenn , ich versuche deinen Ansatz mit einem Raster, aber es funktioniert nicht für mich. Kannst du helfen?

Danke im Voraus

@carlosagsmendes
Um Ihr Problem zu beheben, müssen Sie auf doc zurückgreifen, was erklärt, dass Sie für Grid eine andere Parametersignatur als Lists angeben müssen
scrollTo({scrollLeft: number, scrollTop: number}) => https://react-window.now.sh/#/api/FixedSizeGrid

Hoffe das wird helfen ...
Hinweis: Achten Sie auf den CSS-Trick von

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

Um Hilfe zu geben, hier ein Beispiel mit Grid: https://codesandbox.io/s/wq301o8qz7

Wenn Sie wirklich einen Fenster-Scroller benötigen, können Sie einfach den von React-Virtalized verwenden.

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

WindowScroller mit dynamischem Inhalt
https://codesandbox.io/s/xvl23p7okp

Zu Ihrer Information: Wenn Sie diese Beispiele in Betracht ziehen, beachten Sie bitte, dass die Verwendung von window.innerWidth und window.innerHeight das Vorhandensein von Bildlaufleisten nicht berücksichtigt. Die Größe der Bildlaufleiste, die je nach Browser / Gerät variiert (und ob dieser Inhalt ausreicht, um angezeigt zu werden), muss abgezogen werden.

@bvaughn , Können wir die Rollgeschwindigkeit steuern? Eine virtuelle Liste wird dringend benötigt, um zu verhindern, dass sie zu schnell

@kgregory , eine Idee, wie das mit InfiniteLoader funktionieren würde? In dem von Ihnen angegebenen Beispiel verwendet WindowScroller 's onScroll eine Referenz, die im äußeren Bereich erstellt und auf List angewendet wurde. Wenn Sie jedoch InfiniteLoader , wird die Ein untergeordneter Rückruf für InfiniteLoader erhält von seinen Argumenten ein ref und wendet _that_ auf List . Es scheint nicht möglich zu sein, für beide Anforderungen dieselbe Referenz zu verwenden. Alles, was ich bisher versucht habe, hat nicht funktioniert.

@mrdanimal In dieser Antwort wird auf die Listenreferenz mit der Referenz verwiesen, die von InfiniteLoader stammt: https://github.com/bvaughn/react-window/issues/417#issuecomment -583867845

Ich konnte einige Probleme in der Codesandbox von @PascalSenn beheben, machte aber am Ende zwei eigene, um einige Dinge zu testen, die für mein Projekt relevant sind. Ich poste dies hier, falls es für jemanden von Nutzen ist.

FixedSizeList-Beispiel: https://codesandbox.io/s/react-window-with-windowscroller-fixedsizelist-xujgi
Beispiel für VariableSizeGrid: https://codesandbox.io/s/react-window-with-windowscroller-variablesizegrid-7kbwn

Es scheint nicht mit DynamicSizeList zu funktionieren. Kennt jemand eine Problemumgehung? Das würde mir viel Ärger ersparen