Questions about the length prop

[hunterliu1003]

• Why do we need to pass a length?
• What is the performance benefit of passing a length
• What is the downside of passing just 99999999 with the assumption it's an endless scroll that will keep fetching more tiles on scroll.
• Is it OK to always update this length to be the amount of tiles we've fetched so far?
• Will updating the length not have any negative performance on our grid (eg. re-rendering of currently displayed tiles)

[rocwang]

Why do we need to pass a length?

The length is required to calculate the total length of grid, under a viewport, so browsers can render the grid with a proper scrollbar, as if all the items are rendered at the same time.

The length also help vue-virtual-scroll-grid to determine which items are visible hence need to be rendered, given a scrollbar position. For example, given a list of 100 item, when you scroll the list half way through, the component may render the 33th to 66th items.

What is the performance benefit of passing a length

length doesn't bring any performance benefits. Instead, it's required for a "virtual scroll" experience.

What is the downside of passing just 99999999 with the assumption it's an endless scroll that will keep fetching more tiles on scroll.

Note that a "virtual scroll" experience is different from an classic "infinite scroll" experience, where you just load more items when reaching to the current end of list, so length is not required there.

If you set length to 99999999 or a even bigger number, the scroll bar handle would be tiny and you will see a huge gap after the last item.

Is it OK to always update this length to be the amount of tiles we've fetched so far?

We can and it may sill load all the possible items eventually. However, the user experience would be different I'd imagine, especial if the network is not fast enough. You'd have to wait for the next batch of items to be loaded when you reach to the current end of grid. You can "scroll over" the end of grid while loading the next batch.

Will updating the length not have any negative performance on our grid (eg. re-rendering of currently displayed tiles)

I didn't experiment with it, but I think this probably will hit the performance more or less as the whole thing is reactive. Changing length will trigger recalculation on layout and some other internal states, which in turn might trigger a re-render.

Performance aside, the length of scrollbar would change dynamically when length is changed, which is a strange user experience.