vue-virtual-scroller icon indicating copy to clipboard operation
vue-virtual-scroller copied to clipboard

Reversed vertical scrolling and infinite scroll

Open Oleksii14 opened this issue 9 months ago • 1 comments

Clear and concise description of the problem

I tried to implement a reversed vertical scrolling behaviour using DynamicScroller and infinite scroll behaviour like in the average chat. I also checked the Chat demo before the implementation.

The first thing to note is that the chat demo doesn't contain the infinite scroll behaviour like in the real chats. Also, during the stream, the scroll position is always being reset to the bottom.

Approaches I used:

  1. flex-direction: column-reverse applied to the scroller element. this causes the items to disappear from the view at all.
  2. calling scrollToBottom after the scroller init which works well only with the items that have a fixed height (for example, when the images are rendered, the scrollToBottom doesn't actually scroll to the bottom and the scroll position is somewhere in the middle of the container). Also, when the infinite scroll logic adds new items to the list, the scroll position is reset to the top position of the scroll container.
  3. page mode combined with flex-direction: column-reverse. works, but causes scrolling glitches

Am I missing something or this case was not covered? It would be great to have a working example. FYI the discussions page is not working in this repo 😢

Suggested solution

Alternative

No response

Additional context

No response

Validations

  • [X] Read the docs.
  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Oleksii14 avatar May 22 '24 19:05 Oleksii14