You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
I have implemented a chat interface where messages flow from bottom to top, with the scroll bar anchored to the bottom. To achieve this, I used a native CSS solution, applying flex-direction in reverse to the container. However, I encountered an issue where the scrollbar handle incorrectly jumps to the bottom when scrolling to the top of the chat.
Thank @KingSora for your quick reply.
I updated example.
Try to click "add message".
As you can see, at the first approach, the scroll sticked to the bottom.
In second one with inner container - no.
I see... Well, I have to think about how to fix this issue, because the browser currently doesn't expose any hints about what the min. and max. scroll position in one direction can be. It can be calculated in the range 0..+x but having a reverse flow (column or row) or a direction: rtl will change that range to 0..-x which I can't detect except when I track those properties manually
Sorry, but I can't provide a good workaround for the time being..
For Chrome I could fix this behavior but for other browsers I'm currently not sure how to do it.
Describe the bug
I have implemented a chat interface where messages flow from bottom to top, with the scroll bar anchored to the bottom. To achieve this, I used a native CSS solution, applying flex-direction in reverse to the container. However, I encountered an issue where the scrollbar handle incorrectly jumps to the bottom when scrolling to the top of the chat.
Seems everything works well except scroll handle at top position.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The scrollbar handle should remain at the top when the user scrolls to the top.
Examples
StackBlitz
Environment
The text was updated successfully, but these errors were encountered: