Chat like scroll behaviour (ReactJs)

Question

I am trying to implement a chat application, more precisely a scroll behavior for chat application. I think it's best described with a gif. https://i.imgur.com/NnpMeOx.gif As you can see, I want to support a few key features:

1. Scrolling is reversed so on page load, the messages start on the bottom along with the scrollbar
2. Chat is scrolled to the bottom when user types in a message. (this is easy, no need to pay attention to this part)
3. If new messages appears (pushed by websocket in real life) it shouldn't disrupt the existing scroll position, unless it's already at the bottom. Then it should scroll to reveal the message automatically.

So far I've implemented 2 solutions:

a) Display flex and flex-direction column-reverse on the scrollable element. This works beautifully out of a box, but only on chrome :( IE (and Edge) as well as firefox just ignores this totally. NOT A GOOD SOLUTION

b) I flipped the container with transform: scaleY(-1) then I reversed the messages and fliped every one of those with the same transform. The main obvious problem here is the scroll (mouse wheel and arrows) is reversed. I sort of fixed it, didn't manage smooth scroll (sucks) but yet again, Edge (and probably IE) just shows scrollbar as disabled. NOT A GOOD SOLUTION

I am really hoping to find somebody who can point me in the right direction because so far, my efforts while logically ok totally failed browser compatibility.

The code is on https://github.com/PeterKottas/react-bell-chat, it's react but tbh, that doesn't matter much as this seems more like a general web dev exercise.

P.S.: I can't use jQuery, hope that's fair. So either css or plain javascript. Like I've said, this doesn't have much to do with react

Answer 1

Well I got no replies and managed to fix it myself so I'll accept this in case it helps somebody in the future.

3rd and final solution: I kept the direction of scrolling and didn't do any reversing at all. Instead I hooked into onScroll and wheel event, created a few callbacks and managed to mimic the behavior perfectly. You can find more details in the code on https://github.com/PeterKottas/react-bell-chat.