@sergeyiljin
Делаю дело

Как сделать прокрутку чата, как в VK?

Как сверстать чат по типу VK так, чтобы прокручивался блок сообщений и вверху уходил за грань родительского блока. Сама страница чата должна оставаться на месте без прокрутки. Внизу должны быть видны последние сообщения.
  • Вопрос задан
  • 732 просмотра
Пригласить эксперта
Ответы на вопрос 1
joeberetta
@joeberetta Куратор тега JavaScript
Читай: https://epdf.pub/google-for-dummies.html
Некий скелет думаю расписал понятно. Дальше зависит от ваших скиллов. Если нужно его вам сделать, то это уже на фриланс (можете обращаться)) )

Вкратце логика такова:
Есть два блока:
Сайдбар - список чатов
Основной - окно чата.
Левый это по сути отстилизованный navbar. Сделайте его с заданной высотой (можно тупо 100%) и overflow-y: auto; (т.е. скролл по необходимости)
А правый будет в 2 состояних.
1. Когда не выбран диалог - пустой блок (ну хоть котика на фот поставьте, ваше право)
2. Когда открыт диалог: делаете блок этот не на всю высоту (нам же еще нужен редактор для текста). А чтобы сообщения летели наверх, задаете ему display: flex; flex-flow: row wrap; align-items: flex-end; overflow-y: auto;
А под основным блокном(визуально) будет какой-то инпут/текстариа с заданными стилями
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы