Чат как поведение прокрутки (ReactJs)

Question

Я пытаюсь реализовать приложение чата, точнее, поведение прокрутки для приложения чата. Я думаю, что это лучше всего описать с помощью GIF. https://i.imgur.com/NnpMeOx.gif Как видите, я хочу поддержать несколько ключевых функций:

1. Прокрутка обратная, поэтому при загрузке страницы сообщения начинаются снизу вместе с полосой прокрутки
2. Чат прокручивается вниз, когда пользователь вводит сообщение. (это легко, не нужно обращать внимание на эту часть)
3. Если появляются новые сообщения (выдвигаемые websocket в реальной жизни), это не должно нарушать существующую позицию прокрутки, если она уже не находится внизу. Затем он должен прокрутиться, чтобы автоматически показать сообщение.

Пока я реализовал 2 решения:

a) Отображение сгибания и обратного сгибания столбца на прокручиваемом элементе. Это прекрасно работает из коробки, но только на chrome :( IE (и Edge), а также firefox просто полностью игнорируют это. НЕ ХОРОШЕЕ РЕШЕНИЕ

б) Я перевернул контейнер с помощью transform: scaleY (-1), затем перевернул сообщения и перевернул каждое из них с тем же преобразованием. Основной очевидной проблемой здесь является прокрутка (колесико мыши и стрелки) в обратном порядке. Я вроде исправил это, не справился с плавной прокруткой (отстой), но опять же, Edge (и, вероятно, IE) просто показывает полосу прокрутки как отключенную. НЕ ХОРОШЕЕ РЕШЕНИЕ

Я действительно надеюсь найти кого-то, кто сможет направить меня в правильном направлении, потому что пока мои усилия, в то время как логически нормально, полностью не совместимы с браузерами.

Код на https://github.com/PeterKottas/react-bell-chat, он реагирует, но это не так важно, так как это больше похоже на обычное упражнение для веб-разработчиков.

P.S .: Я не могу использовать jQuery, надеюсь, это справедливо. Так что или CSS или простой Javascript. Как я уже сказал, это не имеет ничего общего с реакцией

Answer 1

Ну, я не получил ответов и сумел исправить это сам, поэтому я приму это на случай, если это кому-нибудь поможет в будущем.

3-е и окончательное решение: Я держал направление прокрутки и не делал никакого движения назад вообще. Вместо этого я подключился к событию onScroll и wheel, создал несколько обратных вызовов и сумел идеально имитировать поведение. Вы можете найти более подробную информацию в коде на https://github.com/PeterKottas/react-bell-chat.