react-virtualized WindowScroller alternative? about react-virtuoso HOT 11 CLOSED

Hi!
Good job on react-virtuoso! It seems like a nice library 👍

I tried to achieve something similar to WindowScroller. It seems to be doable with these things / workarounds:

• Custom scroll container which reports and sets the window's scroll position +- offsetTop of the scroll container.
• Detection of position changes for the list. (eg. an element above disappears). Not sure how to this correctly, so -> polling offsetTop
• To limit the number of items rendered a maxHeight: "100vh" was added to the first div of the scroll container.
• Set a minHeight on Virtuoso so something is initially rendered. After that set the height to the total list height (using totalListHeightChanged for this).

https://stackblitz.com/edit/react-pgd1ms

Would it be possible to add something to the library to make this easier? I think adding the maxHeight: "100vh" shouldn't be an issue, and maybe also adding a prop that forces the initial rendering of some elements (so minHeight wouldn't be needed). 🤔

from react-virtuoso.

I took my time with this feature, but hopefully, this will help whoever finds this issue :).

https://virtuoso.dev/window-scrolling/ - post some feedback here if you give it a try. Thanks!

from react-virtuoso.

Hey,

this is not supported currently, I am afraid. Technically, it should be fairly easy to build such variation of the component, reusing the same engine but rendering in a different manner. I can help with directions In case you are interested in contributing such implementation.

Thanks!

from react-virtuoso.

Thanks I may have a look at implementing it in the future.

from react-virtuoso.

The workaround zsee posted seems to work if you have list that takes up the entire height of the viewport.

However, I don't believe it's possible to do with a GroupedVirtuoso if you have anything above the list as it calculates the top margin for the sticky group header by calculating the top offset, and it appears to only do that calculation when scrolling has stopped, so it will overshoot the top while scrolling and jump back down when done scrolling. In the below video I added position: sticky to Hello World.

Anyone have any ideas on how to make this work?

from react-virtuoso.

🎉 This issue has been resolved in version 1.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from react-virtuoso.

@petyosi Does the window scrolling functionality only work with the list? Because I tried to use it with the grid component and I get this:

Warning: React does not recognize the useWindowScroll prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase usewindowscroll instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by VirtuosoScroller)
in VirtuosoScroller (created by GridRoot)
in GridRoot (created by ForwardRef)

from react-virtuoso.

@mciszczon I have not ported it to the grid yet. Likely going to do that soon, but no concrete ETA.

from react-virtuoso.

@mciszczon I have not ported it to the grid yet. Likely going to do that soon, but no concrete ETA.

Thanks @petyosi, I'm looking forward for it and will have your package on the radar. I'm afraid I'll not be able to help you with this too much, but what I can tell you is that it's really not that simple to make a virtualized grid in React. I've already used react-list and react-virtualized but both of these have some issues to them which are not trivial to fix.

Anyway, thanks for the reply and keep up the great work! 👍🏻

from react-virtuoso.

@mciszczon the window scrolling implementation of the grid won't differ from the current one, except for the missing scroller. If you would like to share the challenges you are facing with grids react-list and react-virtualized (maybe open a discussion?) I would be more than happy to review and comment. Thank you!

from react-virtuoso.

Hello @petyosi, This library is great!

I am wondering if you had any thoughts on how I might get the scroll bar off the content?

Below is a screenshot of the corner where I have changed our margins to padding around the GroupedVirtuoso and the scrollbar is over the content.

i think we can live with this, but i figured i would touch base here to see if there's a way to get all the same great functionality but with a scroll bar that would respect the padding for the look i'm going for.

PS: I'm also looking for a way to put padding between groups, check this screenshot

thanks

from react-virtuoso.