vue-virtual-scroller
vue-virtual-scroller copied to clipboard
Reversed vertical scrolling and infinite scroll
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:
-
flex-direction: column-reverse
applied to the scroller element. this causes the items to disappear from the view at all. - 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, thescrollToBottom
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. - 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.