scroller on window.onscroll

[harrybabu]

Currently the scroller is visible on the container div and the scrolling logc works for the particular div, is it possible to emulate the logic on window.onscroll.

[bvaughn]

I don't think I understand. Even if your virtual list/table was 100% width and height of the viewport, you wouldn't be able to use window scroll because the scrollable region of items would be inside of the list/table. (That's how the virtualization is done.)

Maybe you could explain in a different way?

[harrybabu]

I want to use the entire window as a scroll container instead of just a single div.

[bvaughn]

But what would be the difference if the div was the full width and height of the window?

[bvaughn]

Here's a visual I created of how react-virtualized works:

In this example, a list is 300 pixels tall. It contains 10 items, each with a row height of 60 pixels. This means that at any time only 5 or 6 rows will be visible. react-virtualized only renders those 5-6 rows though, but it creates a scrollable container that's 600 pixels tall (10 rows x 60 pixels each).

If the list was the entire height of the browser window, it would still work the same. (There would be a scrollable container large enough to contain all of the list items- but only enough to fill the visible viewport would be rendered.)

So basically... there would be no difference. :)

Going to close this issue. Feel free to ask a follow-up question if you have any.

[harrybabu]

Yeah i understood that

Assume that you have a pagelayout of header, footer, left sidebar and content (react-vrtualized list) is in the middle. Currenlty the scrollbar is coming only for the content wrapper div.

My usecase is, i want the scrollbar to be at the window level. Meaning the content wrapper should be window instead of wrapper div.

Any help appreciated 👍

[harrybabu]

Something like this

https://github.com/seatgeek/react-infinite#user-content-using-the-window-to-scroll-usewindowasscrollcontainer-mode

[bvaughn]

I don't understand why you'd want that, but maybe once you have it working you can show me and I would? :) Anyway... you could accomplish that by doing the following:

1. Use a fixed position for your content so that it won't scroll with the window.
2. Tell the window how much scrollable height it has so a scrollbar appears. (This is probably as simple as heightHeight + footerHeight + numRows * rowHeight.)
3. Disable scrolling for your VirtualScroll via CSS (overflow: hidden) so its scrollbars will not be visible. (You could do this by specifying a custom class via className or by overriding that property on the global .VirtualScroll class.)
4. Listen to window scroll events and call VirtualScroll#setScrollTop to scroll the list when the window scrolls.

I mentioned VirtualScroll in the example above but Grid and FlexTable both also have similar set-scroll-position methods. You can find them in the docs.

[traboukos]

@bvaughn the following layout cannot currently be implemented with react-virtualized https://app.tech.eu/companies. If you see the virtual container with the list items is part of the whole page and scrolls along with the other elements. A height is set on the list container that is equivalent to the number of virtual list items but only the currently visible ones are rendered.

That is the use case + performance issues that made me implement something like this my self instead of using the existing open source ones. React virtualized seems performant enough on first look. It would be nice to support this kind of functionality.

[bvaughn]

@traboukos,

Does the approach I described above for @harrybabu not enable this sort of layout? It seems to me like it should. Maybe I'm missing something?

[traboukos]

@bvaughn

The problem is that virtual scroll creates an inner scroll container. In the page I linked above I need other elements apart from the elements in the virtual list to be scrolling on the same container. The only way I can see your approach working is if I put every element inside the virtual scroller. I would have to put also in there the filters or any other text that goes above the list. Also the approach described seems a bit hacky and convoluted to me. As a first time user to the component I would definitely stay away from this. I am not currently using react-virtualized and I am giving this feedback only to make this better and because I think you dont fully understand the issue reported.

As far as fixing this maybe it does not make sense to cover all use cases anyways. Better do one thing and do it well than becoming a bloated and slow component. For the use case of scrolling inside a div the component seems to be working pretty well.

[bvaughn]

That's why I mentioned steps 3 (disable the inner scroll) and 4 (relay window scroll info to the list/grid).

I do understand the issue being reported but I appreciate your offering extra context. I'm not sure this is something I want to support within any of my virtualized components for fear of bloating them. I could potentially create a HOC that could be used to decorate a virtual list and coordinate the pattern I mentioned above.