Как правильно организовать автопрокрутку сообщений в чате?

Question

[Илья Миронов]

Передо мной стоит задача реализовать мобильный чат на стэке ReactJS + PWA. Но встает вопрос: как мне организовать прокрутку блока чата таким образом, чтобы прокрутка всегда по умолчанию находилась внизу этого блока?
Как пример подобной реализации - практически любое приложение, в котором есть чат (Telegram, ВКонтакте и т.д.): новые сообщения появляются снизу, старые - остаются наверху.
Уже пробовал такие методы как автоматическая прокрутка при переходе на страницу (не подходит, т.к. впоследствии при добавлении новых сообщений прокрутка не происходит), вертикальное отражение блока (не подходит, т.к. в таком случае инвертируется прокрутка в ПК-версии).
Хотелось бы реализовать данный кейс исключительно на CSS, не прибегая к использованию JS.

Answer 1

[leeroyjenkins176]

Сообщения вставлять в начало чата. А ему применить свойство flex-direction: column-reverse

Comments

[Илья Миронов]

Большое Вам спасибо за решение! Очень признателен!