Reversed vertical scrolling and infinite scroll

[Oleksii14]

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

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

[Oleksii14]

Monosnap.screencast.2024-05-22.23-16-31.mp4

Here is a repo and a video with the reproduction of one of the described cases (see scrolling glitches after scroll to bottom)