React-window: Windowscroller

WindowScroller était l'un de ces pénibles à entretenir des composants. J'en vois l'utilité, mais je ne suis pas sûr de vouloir m'engager à en maintenir un autre. Je préférerais plutôt, si possible, qu'un composant externe soit construit (et publié séparément) qui implémente cette fonctionnalité au-dessus de react-window.

Je serais peut-être prêt à apporter quelques modifications à react-window pour prendre en charge un tel composant, s'il existait, en fonction de sa complexité.

Peut-être qu'un bon début initial serait que quelqu'un (vous?) Soumette un PR qui l'ajoute directement à cette bibliothèque - afin que nous puissions voir à quel point il pourrait être compliqué de publier séparément.

Si vous avez vraiment besoin d'un scroller de fenêtre, vous pouvez simplement utiliser celui de react-virtalisé.

FenêtreScroller
https://codesandbox.io/s/vy620pkzzy

WindowScroller avec contenu dynamique
https://codesandbox.io/s/xvl23p7okp

Je pense que je vais clore ce problème pour l'instant car je n'ai pas l'intention de prendre des mesures à ce sujet - et le plan à long terme (dans mon esprit du moins) était de toute façon un module séparé. Je serais quand même heureux de jeter un œil à une proposition!

Hu @PascalSenn , utilisez-vous le WindowScroller de react-virtualized avec succès? Merci d'avance

Salut encore @PascalSenn , j'essaie votre approche avec une grille mais cela ne fonctionne pas pour moi. Pouvez-vous m'aider?

Merci d'avance

@carlosagsmendes
Pour résoudre votre problème, vous devez vous replier sur doc qui explique que pour Grid, vous devez fournir une autre signature de paramètre que Lists
scrollTo({scrollLeft: number, scrollTop: number}) => https://react-window.now.sh/#/api/FixedSizeGrid

J'espère que cela aidera ...
Remarque: prenez soin de l'astuce CSS de @PascalSenn

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

Pour vous aider, voici un exemple de fonctionnement de Grid: https://codesandbox.io/s/wq301o8qz7

Si vous avez vraiment besoin d'un scroller de fenêtre, vous pouvez simplement utiliser celui de react-virtalisé.

FenêtreScroller
https://codesandbox.io/s/vy620pkzzy

WindowScroller avec contenu dynamique
https://codesandbox.io/s/xvl23p7okp

Pour info, pour quiconque considère ces exemples, veuillez noter que l'utilisation de window.innerWidth et window.innerHeight ne tient pas compte de la présence de barres de défilement. La taille de la barre de défilement, qui varie en fonction du navigateur / de l'appareil (et de savoir si le contenu est suffisant pour être présenté), doit être déduite.

@bvaughn , pouvons-nous contrôler la vitesse de roulement? La liste virtuelle est très nécessaire pour éviter de glisser trop vite et de rendre sans éléments

@kgregory , une idée de la façon dont cela fonctionnerait avec InfiniteLoader ? Dans l'exemple que vous fournissez, WindowScroller de onScroll utilise une référence créée dans la portée externe et appliquée à List , mais si vous utilisez InfiniteLoader , le callback enfant pour InfiniteLoader obtient un ref de ses arguments et applique _that_ à List . Il ne semble pas possible d'utiliser la même référence pour les deux exigences. Tout ce que j'ai essayé jusqu'à présent n'a pas fonctionné.

@mrdanimal voir cette réponse pour référencer la liste ref avec la référence qui vient d'InfiniteLoader: https://github.com/bvaughn/react-window/issues/417#issuecomment -583867845

J'ai pu résoudre certains problèmes dans les codesandbox de @PascalSenn, mais j'ai fini par en créer deux pour tester quelques éléments pertinents pour mon projet. Je poste ceci ici au cas où cela serait utile à quiconque.

Exemple FixedSizeList: https://codesandbox.io/s/react-window-with-windowscroller-fixedsizelist-xujgi
Exemple de VariableSizeGrid: https://codesandbox.io/s/react-window-with-windowscroller-variablesizegrid-7kbwn

Cela ne semble pas fonctionner avec DynamicSizeList. Quelqu'un connaît-il une solution de contournement? Cela me sauverait beaucoup d'ennuis