Start in the middle of the list

[JosephSilber]

When scrolling huge lists that are incrementally being loaded from the server, there may be a need to actually start in the middle of the list.

Should there be a way to specify that we're in the middle of the list, and allow the user to scroll up to load the previous records?

[domenic]

I think this can be done using today's API. Roughly, it would be something like:

• Have your item source return dummy items "above" the desired position.
• Have your updateChild render those dummy items in such a way as to give the approximately right height for them.
• Immediately call scroller.scrollToIndex(desiredIndex).
• Over time, as you load data from the server, replace the dummy items with the real items. Then, when the user scrolls up, they'll see the real items. (Or, you could wait to load until they're close to being visible, by using the rangechange event.)

Maybe we should have a demo showing this?

[JosephSilber]

So if I'm starting at record 1,000,000,000 then I'd have to create such a huge array (with empty elements)?

[domenic]

No, that's the beauty of the ItemSource API! It never asks you to translate indices into items until it's ready to display them.

[valdrinkoshi]

Take a look at smoke/infinite/index.html as an example:

virtualScroller.itemSource = new ItemSource({
  getLength: () => Number.MAX_SAFE_INTEGER,
  item: (index) => index,
  key: (index) => index,
});

// Here you can add this to scroll to the middle of the scroller
// Wait for first rendering, then scroll to middle
requestAnimationFrame(() => {
  virtualScroller.scrollToIndex(virtualScroller.itemSource.length / 2);
});

Note that in this particular example, we're rendering way too many items and we hit the browser limitation on maximum height for a layer, which is ~30M pixels in chrome. That's why you'll see the scrollbar position already at the end, even though we scrolled to the middle. Try lowering the getLegth() to 1000 to see it working as expected

[JosephSilber]

We're still at least loading the first set of items, no?

[domenic]

Yeah, if you do the requestAnimationFrame, it will load and render the first set first. You could also omit the requestAnimationFrame, and then it wouldn't load/render the first set of items.

[rakina]

Closing this as this seems to be solved already?