React-window: Desplazador de Windows

WindowScroller fue uno de esos componentes difíciles de mantener. Veo la utilidad de esto, pero no estoy seguro de estar interesado en comprometerme a mantener otro. En su lugar, preferiría, si es posible, que se construya un componente externo (y se publique por separado) que implemente esta funcionalidad en la parte superior de la ventana de reacción.

Podría estar dispuesto a hacer un par de cambios en la ventana de reacción para admitir dicho componente, si existiera, dependiendo de lo complejos que fueran.

Tal vez un buen comienzo sería que alguien (¿usted?) Envíe un PR que lo agregue a esta biblioteca directamente, para que podamos ver lo complicado que puede ser publicar por separado.

Si realmente necesita un desplazador de ventana, puede usar el de react-virtalized.

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

WindowScroller con contenido dinámico
https://codesandbox.io/s/xvl23p7okp

Creo que voy a cerrar este tema por ahora, ya que no planeo tomar ninguna acción al respecto, y el plan a largo plazo (al menos en mi mente) era un módulo separado de todos modos. ¡Sin embargo, todavía estaría feliz de echar un vistazo a una propuesta!

Hu @PascalSenn , ¿estás usando WindowScroller de react-virtualized con éxito? Gracias por adelantado

Hola de nuevo @PascalSenn , estoy probando tu enfoque con una cuadrícula pero no me funciona. ¿Puede usted ayudar?

Gracias por adelantado

@carlosagsmendes
Para solucionar su problema, debe recurrir al documento que explica que para Grid, debe proporcionar otra firma de parámetro que Lists
scrollTo({scrollLeft: number, scrollTop: number}) => https://react-window.now.sh/#/api/FixedSizeGrid

Espero que esto ayude ...
Nota: ocúpate del truco CSS de @PascalSenn

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

Para dar ayuda, aquí una muestra con Grid funcionando: https://codesandbox.io/s/wq301o8qz7

Si realmente necesita un desplazador de ventana, puede usar el de react-virtalized.

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

WindowScroller con contenido dinámico
https://codesandbox.io/s/xvl23p7okp

Para su información, para cualquiera que esté considerando estos ejemplos, tenga en cuenta que el uso de window.innerWidth y window.innerHeight no tiene en cuenta la presencia de barras de desplazamiento. El tamaño de la barra de desplazamiento, que varía según el navegador / dispositivo (y si es suficiente contenido para que se presente), debe deducirse.

@bvaughn , ¿Podemos controlar la velocidad de rodadura? La lista virtual es muy necesaria para evitar que se deslice demasiado rápido y se renderice sin elementos.

@kgregory , ¿alguna idea de cómo funcionaría esto con InfiniteLoader ? En el ejemplo que proporciona, WindowScroller onScroll usa una referencia creada en el alcance externo y aplicada a List , pero si usa InfiniteLoader , la child callback para InfiniteLoader obtiene un ref de sus argumentos y aplica _eso_ a List . No parece que sea posible utilizar la misma referencia para ambos requisitos. Todo lo que he probado hasta ahora no ha funcionado.

@mrdanimal vea esta respuesta para hacer referencia a la referencia de la lista con la referencia que proviene de InfiniteLoader: https://github.com/bvaughn/react-window/issues/417#issuecomment -583867845

Pude solucionar algunos problemas en el codeandbox de @PascalSenn, pero terminé haciendo dos propios para probar algunas cosas que son relevantes para mi proyecto. Estoy publicando esto aquí en caso de que sea útil para alguien.

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

No parece funcionar con DynamicSizeList. ¿Alguien sabe una solución? Me ahorraría muchos problemas