Имеется готовая верстка сайта, реализованная верстальщиком с аутсорса. Не решена важная проблема скролла чатов.
Крайне важна оперативность действий. Критический срок реализации 2 дня: после этого без убедительных объяснений платить не стану.


Что надо сделать? Разобраться в коде верстальщика и реализовать 3 ключевых момента



Задачи 1-2 касаются скролла: по сути он должен быть реализован как в телеграмме.

(Сейчас нет раздельного скролла: скроллится все окно window, в этом и есть суть проблемы)

1. Все содержимое чата должно скроллится внутри соответствующего ему окошка.
   
   Взаимодействия с бэкендом происходит с помощью вебсокета, поэтому все сообщения (и старые, и новые), приходящие на сторону клиента, генерируются скриптом и добавляются скриптом — именно здесь предыдущий верстальщик столкнулся с проблемами и не смог разобраться со скроллом. Новые сообщения добавляются в его содержимое с помощью append (или appendChild)
   
   
   
   Для каждого сообщения внутри окошка чата должна корректно работать прокрутка к этому сообщению (речь идет об message.scrollIntoView() javascript), то есть при вызове этой команды чат должен проскроллиться к этому сообщению, а все остальное зафиксировано и не сдвинуто с места
   
   
   
   Плашка для ввода сообщения должна быть прижата к нижней границе все окошка window (сейчас, вроде, это уже реализовано — так и должно остаться).
   
   
   
   Объяснить, как улавливать тот момент, когда юзер пытается загрузить старые сообщения — то есть докручивает до конца прогруженной части чата и делает свайп (скролл) вверх — чтобы можно было добавить туда новые с помощью prepend. При добавке этих новых сообщений все связанное со скроллом тоже должно работать корректно, в общем как в телеграмме или вк.
   
   


2. Аналогично сделать окошко с названием чатов : независимый от чата скролл. Названия чатов загружаются изначально с сервера в фиксированном порядке и новые чаты появиться не могут (вообще нет опции создания нового чата, все загружается при соединении с вебсокетом).
   
   


3. Зафиксировать верхнюю шапку с логотипом, чатами, личным кабинетом. Она должна быть видна в любой момент вне зависимости от проскроленного состояния.
   
   Также должны быть зафискированы название чата и плашка Главное внутри чата (аналог закрепленного сообщения в телеграмме или вконтакте). Сейчас это уже реализовано, так и должно сохраниться.
   
   

Все задачи требуется реализовать с учётом адаптива (ясно, что это скорее касается 3его пункта) везде, кроме мобильных девайсов, они нас не интересуют.
Дизайн для прояснения в приложении