React-window: Windowscroller

WindowScroller era um daqueles componentes difíceis de manter. Vejo a utilidade disso, mas não tenho certeza se estou interessado em me comprometer com a manutenção de outro. Eu preferiria, se possível, que um componente externo fosse construído (e publicado separadamente) que implementasse essa funcionalidade no topo da janela react.

Eu posso estar disposto a fazer algumas alterações na janela de reação para suportar tal componente, se ele existisse, dependendo de quão complexo ele seria.

Talvez um bom começo seja alguém (você?) Enviar um PR que o adiciona a esta biblioteca diretamente - para que possamos ver como pode ser complicado publicar separadamente.

Se você realmente precisa de um scroller de janela, você pode apenas usar o de react-virtalized

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

WindowScroller com conteúdo dinâmico
https://codesandbox.io/s/xvl23p7okp

Acho que vou encerrar este problema por agora, já que não pretendo tomar nenhuma ação a respeito - e o plano de longo prazo (pelo menos em minha mente) era um módulo separado de qualquer maneira. Ainda assim, ficaria feliz em dar uma olhada em uma proposta!

Hu @PascalSenn , você está usando o WindowScroller do Rea-virtualizado com sucesso? desde já, obrigado

Olá de novo, @PascalSenn , estou tentando sua abordagem com uma grade, mas não está funcionando para mim. Você pode ajudar?

desde já, obrigado

@carlosagsmendes
Para corrigir seu problema, você deve recorrer ao doc, que explica que, para Grid, você deve fornecer outra assinatura de param em vez de Lists
scrollTo({scrollLeft: number, scrollTop: number}) => https://react-window.now.sh/#/api/FixedSizeGrid

Espero que isso ajude ...
Nota: cuide do truque CSS de @PascalSenn

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

Para dar ajuda, aqui está um exemplo com Grid funcionando: https://codesandbox.io/s/wq301o8qz7

Se você realmente precisa de um scroller de janela, você pode apenas usar o de react-virtalized

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

WindowScroller com conteúdo dinâmico
https://codesandbox.io/s/xvl23p7okp

Para sua informação, para quem está considerando esses exemplos, observe que o uso de window.innerWidth e window.innerHeight não leva em consideração a presença de barras de rolagem. O tamanho da barra de rolagem, que varia de acordo com o navegador / dispositivo (e se é conteúdo suficiente para serem apresentados), precisa ser deduzido.

@bvaughn , podemos controlar a velocidade de rolamento？ A lista virtual é muito necessária para evitar deslizamentos muito rápidos e renderização sem elementos

@kgregory , alguma ideia de como isso funcionaria com InfiniteLoader ? No exemplo que você fornece, WindowScroller 's onScroll usa um ref criado no escopo externo e aplicado a List , mas se você usar InfiniteLoader , o o retorno de chamada filho para InfiniteLoader obtém um ref de seus argumentos e aplica _that_ a List . Não parece ser possível usar a mesma referência para ambos os requisitos. Tudo o que tentei até agora não funcionou.

@mrdanimal veja esta resposta para fazer referência à lista ref com a ref que vem de InfiniteLoader: https://github.com/bvaughn/react-window/issues/417#issuecomment -583867845

Consegui consertar alguns problemas no codesandbox do @PascalSenn, mas acabei fazendo dois para testar algumas coisas que são relevantes para o meu projeto. Estou postando isso aqui, caso seja útil para alguém.

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

Parece não funcionar com DynamicSizeList. Alguém conhece uma solução alternativa? Isso me pouparia muitos problemas