CODEWITHSUNDEEP
reactjsreact-virtualized
Radhad
Radhad

Reputation: 133

react-virtualized combined with WindowScroller and AutoSizer on large list does not render all items

I have a large list of more than 300 items. For better preformance I want to use react-virtualized and only render the currently visible items on the screen. For design reasons, I have to use the WindowScroller and depending on the screen size, the list has a different width.

Therefore I'm using WindowScroller and Autosizer. I can scroll down the whole list of 70 items but it stops rendering after 30 list items (which are there before I start scrolling). The number of items rendered depends on the visible space (checked with opened and closed console from codesandbox.io).

I think I have an error in the usage but I don't know what I'm doing wrong.

Full Example: https://codesandbox.io/s/64lzm266n

I have searched on stackoverflow and the issues page of react-virtualized but coukd not find a solution. I hope somebody can help me.

Upvotes: 3

Views: 8306

Answers (1)

Radhad
Radhad

Reputation: 133

I've got a solution presented over at GitHub issues (https://github.com/bvaughn/react-virtualized/issues/1216) of this project.

I have not added the style parameter and did not give scrollTop from WindowScroller to the List component. You can check the fixed version at https://codesandbox.io/s/7yzzw92xw1

Credits & thanks to anagorsky

Upvotes: 6

Related Questions