Skip to content

Reversed vertical scrolling and infinite scroll #870

Open
@Oleksii14

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions