Как проскроллить вниз чата, если есть изображения?

Question

[Daniel~]

При загрузке чата условно идет вот такой код, чтобы проискроллить вниз чата (дефолтное поведение всех чатов)

chat.scrollTo(0, chat.scrollHeight)

Проблема в том, что в чате также есть картинки, их размеры станут известны только после их загрузки. А значит начальный scollHeight будет неполным. Следовательно, код выше будет работать некорректно, и чат проскроллится на высоту минус высота всех картинок.

Есть идея: сервер посылает натуральные ширину и высоту картинки, чтобы я в коде писал

<img width={naturalWidth} height={naturalHeight} />

Но я этот вариант еще не пробовал, но я не думаю, что это то, что обычно используют
Как вы выходите из подобной ситуации?

Answer 1

[Daniel~]

Достаточно прочитать первые несколько байтов картинки. Где-то в первых 5 содержится вся нужная мета-инфа. По крайней мере так для jpg работает

В итоге сделал микросервис, который выплевывает на фронт оригинальные высоту/ширину. При загрузке чата запрашиваю размеры для всех картинок (пагинация по 15 сообщений, так что изображений не долнжо быть много) и отрисовываю соответственно этим размерам картинку

Answer 2

[Taulan Khatuaev]

const chat = document.getElementById('chat');

// Создание нового наблюдателя за изменениями в chat
const observer = new MutationObserver(() => {
  // Если chat.scrollHeight изменилось, прокрутите до нижнего края chat
  if (chat.scrollHeight !== chat.dataset.scrollHeight) {
    chat.scrollTo(0, chat.scrollHeight);
    chat.dataset.scrollHeight = chat.scrollHeight;
  }
});

// Настройка конфигурации наблюдателя
const config = { attributes: true, childList: true, subtree: true };

// Запуск наблюдателя за изменениями
observer.observe(chat, config);