Failed to work with TanStack/virtual

[B-l-u-e-b-e-r-r-y]

Hello everyone!
I'm using the library TanStack/virtual, but it seems to conflict with OverlayScrollbars needing to set a height for the scrollbar to appear.

Here is an example: CodeSandbox

<div ref={osRef} style={{ height: "95vh" }}>
If the height is specified, the scrollbar appears.

<div ref={osRef}>
Without specifying height, the virtualizer works, but the scrollbar doesn't appear.

Could I show the scrollbar without setting the height?
Or have any ideas?
Thanks for your help.

[KingSora]

@B-l-u-e-b-e-r-r-y Good day :)

Since you are using the useWindowVirtualizer hook you have to also initialize OverlayScrollbars to the window (body) element. I've created a demo for your here: https://codesandbox.io/s/youthful-shockley-0c17lm?file=/src/App.js

In case you wanna use the useVirtualizer hook I've also made a demo for you: https://codesandbox.io/s/bold-robinson-78t7nz?file=/src/App.js

[B-l-u-e-b-e-r-r-y]

@KingSora
Wow! You’re a lifesaver!

[andreamazzatxt]

Hi, I tried to implement the second example using useVirtualizer hook, scrollbar works fine but the rows are not virtualized. If you check @KingSora demo there are 300 rows in the dom.
Removing the external wrapper ( the overlayscrollbars one ) useVirtualizer works fine.

[Victor-Varghese]

Hi @KingSora useVirtualizer code doesn't work properly. Rows are not virtualised. Can you help?

I tried using the normal scrollbar component. Same thing, rows will not load

[KingSora]

@andreamazzatxt @Victor-Varghese Sorry for the late reply - In the example I forgot to limit the size of the viewport div.. so the virtualizer measured the div which could expand endlessly thus is could load all of the items into it. Setting a maxHeight: '100%' (or any other fixed maxHeight) on that div fixed the issue: https://codesandbox.io/s/bold-robinson-78t7nz?file=/src/App.js

I replaced that example in my earlier post.

[KingSora]

Related: #639