Prepend list items with infinite scroll and keep scroll position

[agnauck]

I am looking for some help on an implementation for infinite scrolling in both direction, up and down.

The down part is pretty simple. Because when I add new items to the end of the list, then only the scrollbar adjusts automatically. The list stays as is and does not scroll anywhere. This is desired behaviour.

When the list is on top and I prepend new items then by default is scrolls up to the new topmost item. But usually when prepending items in a infinite scrolling scenario the UI should stay as is, and only the scrollbar should adjust slightly to indicate that I can scroll up now.

I tried several scenarios to scroll to the last item prior to the prepend. This brings the item into the view, but usually not as the first item in the list.

Here is a small demo project which I started in case someone wants to play with it and try solutions:
https://github.com/agnauck/AvaloniaListBoxBug3/tree/infinite-scroll

Here is a virtual list component for vue.js. I want to have the same behaviour when prepending new items to my ViewModel which gets displayed using a VirtualizingStackPanel. Item height need to be dynamic which adds more complexity.
https://tangbc.github.io/vue-virtual-scroll-list/#/chat-room

[agnauck]

With the current ScrollIntoView method we cannot control on where in the view the item gets positioned. The results are also very random.

I think 2 common scenarios are the following:

1. Scroll item into view and position the start of the item at the top of the view

Example: Scroll item 502 into view and position on top

2. Scroll item into view and position the end of the item at end of the view

Example: Scroll item 503 into view and position at the end