Large lists (10,000,000 items) doesn't display all items
robertjcolley opened this issue · 5 comments
https://codesandbox.io/s/laughing-stallman-6lnj8j?file=/index.js
https://6lnj8j.csb.app/
I've noticed that large lists don't seem to display all of the items in the list when scrolling down.
I having same problem, The React Virtual library works properly, but I doubt its optimization.
Could it be to do with the height limit for divs? It's circa 33.5 million pixels on most browsers. If your list is comprised of rows that are circa 20px high that would put your limit around 1,675,000 rows which looks to be right around where your list is running out of space.
This is a hard limit, but there are ways around it since the window is just make-believe anyway. AG Grid has an implementation that they speak about here https://www.ag-grid.com/react-data-grid/massive-row-count/
In essence, taking the scroll position and amplifying it by the ratio between the div height and the real total height of all of your rows.
For me in firefox, instead of the height of the virtual list being capped cutting off the last items, this manifests as the div showing up as just larger than the list, and scrolling down causes the new items to expand the list. This makes it time consuming to reach the bottom of the list since you have to repeatedly scroll to the bottom to expand the list so you can scroll more - and dragging the scroll bar seems slower than using the scroll wheel.
Easier demoed than explained:
simplescreenrecorder-2024-04-03_16.24.28.mp4
Not a huge issue imo since the limit is pretty huge, but good to keep in mind. The limit for me seems to be around ~17M px (the largest I was able to get mine to go was 17895700px)
I have the same problem here, did you solve it? @robertjcolley