ScrollArea vertical reversed

[Miloshinjo]

Hello,

I have a task where I need to make scroll area scroll from bottom -> top. Easiest way to do this is via column-reverse from flexbox, but UI looks fine, but thumb is not moving when I'm scrolling. Is there something I'm doing wrong, and also, does ScrollArea support that kind of behavior?

Example: Imaging scrolling slack chat from bottom to top. That's the behaviour I'm trying to implement with ScrollArea.

Thanks

[benoitgrelard]

Hey @Miloshinjo, I'm guessing it was you who asked on twitter also, I replied there: https://twitter.com/benoitgrelard/status/1533783056707878913

Hey, it is just a regular scrolling container underneath so anything you can do with a regular one should be possible here. What is the use case? Like a chat app where it auto-scrolls down all the time?

It looks like I was spot-on with what your use-case was! haha

Easiest way to do this is via column-reverse from flexbox, but UI looks fine, but thumb is not moving when I'm scrolling. Is there something I'm doing wrong, and also, does ScrollArea support that kind of behavior?

Regarding this, could you provide a sandbox so I could see the issue?

Example: Imaging scrolling slack chat from bottom to top. That's the behaviour I'm trying to implement with ScrollArea.

Typically the way this would be implemented wouldn't be to reverse the order of the elements, but rather to control the scroll position. You'd run an effect to scroll to the bottom automatically anytime a new message is added.

[kyb3r]

Any updates on this?

[benoitgrelard]

The related issue is here: #1585.
No updates, I haven't had a chance to look at it yet.

[Anu-cool-007]

I'm in a similar boat with a chat screen. Hoping this gets fixed soon

[maximececcaldi]

Hello, any updates now?
Thanks

[blixt]

I also ran into an issue here. A problem is that ScrollArea injects a <div style="display:table;…"> element as a child between the viewport element and the actual children, plus when used with shadcn, the forwarded ref goes to the outer element, not the viewport. So you have a bunch of problems implementing a chat UI:

• You can't easily access the scrollable viewport element to check its offset (this can be solved by not using shadcn)
• It's hard to grow the inner children to fill the vertical space, so that you can have bottom-aligned elements in the scroll area, because there is no flex box in the actual scrollable content

I need to experiment more, maybe asChild can take over this strange display:table element, but this component is not friendly for the chat use case either way.