Windowscroller

[jfrolich]

Thanks for your work on this, looks really impressive 🎉

I am interested if you are open to add windowscroller functionality in this library or if that is out of scope for this library perhaps because of performance reasons.

In our app we make use of react-virtualized at this moment, but it's always great to switch to a more performant alternative. If I can find time, I am interested to help out with the implementation of the windowscroller functionality.

[bvaughn]

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.

[PascalSenn]

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

[bvaughn]

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!

[carlosagsmendes]

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

[carlosagsmendes]

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

Thanks in advance

[lipoolock]

@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

[kgregory]

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.

[JinJieTan]

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

[d-imal]

@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.

[lukemorales]

@mrdanimal see this answer to reference the list ref with the ref that comes from InfiniteLoader: #417 (comment)

[mackinleysmith]

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

[tastyqbit]

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

[meotimdihia]

I don't get it.
If we import WindowScroller from react-virtualized, isn't an additional 116kB to the website?
then should we use react-virtualized instead of?