React-window: Windowscroller

WindowScroller was one of those painful to maintain components. I see the usefulness of it, but I'm not sure I'm interested in committing to maintain another one. I would prefer instead, if possible, for an external component to be built (and published separately) that implements this functionality on top of react-window.

I might be willing to make a couple of changes to react-window to support such a component, if it existed, depending on how complex they would be.

Maybe a good initial start would be for someone (you?) to submit a PR that adds it to this library directly– so we could see how complicated it might be to publish separately.

If you really need a window scroller, you can just use the one of react-virtalized.

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

WindowScroller with dynamic content
https://codesandbox.io/s/xvl23p7okp

I think I'm going to close this issue for now since I don't plan on taking any action on it—and the long term plan (in my mind at least) was a separate module anyway. I'd still be happy to take a look at a proposal though!

Hu @PascalSenn , are you using the WindowScroller from react-virtualized with success? Thanks in advance

Hi again @PascalSenn , I'm trying your approach with a grid but it is not working for me. Can you help?

Thanks in advance

@carlosagsmendes
To fix your issue, you have to fallback on doc which is explaining that for Grid, you have to provide another param signature than Lists
scrollTo({scrollLeft: number, scrollTop: number}) => https://react-window.now.sh/#/api/FixedSizeGrid

Hope this will help...
Note: take care of the CSS trick of @PascalSenn

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

To give help, here a sample with Grid working : https://codesandbox.io/s/wq301o8qz7

If you really need a window scroller, you can just use the one of react-virtalized.

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

WindowScroller with dynamic content
https://codesandbox.io/s/xvl23p7okp

FYI for anyone considering these examples, please note that use of window.innerWidth and window.innerHeight does not account the presence of scrollbars. The scrollbar size, which varies by browser/device (and whether these is enough content for them to be presented), needs to be deducted.

@bvaughn ,Can we control the rolling speed ？ Virtual list is very needed to prevent sliding too fast and rendering without elements

@kgregory, any idea how this would work with InfiniteLoader? In the example you provide, WindowScroller's onScroll uses a ref created in the outer scope and applied to List, but if you use InfiniteLoader, the child callback for InfiniteLoader gets a ref from its arguments and applies _that_ to List. It doesn't seem like it's possible to use the same ref for both requirements. Everything I've tried so far hasn't worked.

@mrdanimal see this answer to reference the list ref with the ref that comes from InfiniteLoader: https://github.com/bvaughn/react-window/issues/417#issuecomment-583867845

I was able to get some issues fixed in @PascalSenn 's codesandbox, but ended up making two of my own to test out a few things that are relevant to my project. I'm posting this here in case it's of use to anyone.

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

It doesn't seem to work with DynamicSizeList. Does anyone know a workaround? It would save me a lot of trouble