Сохранение положения прокрутки при загрузке изображений

Question

У меня есть страница со списком сообщений чата - часть текста, некоторые изображения.

Когда страница загружается, она прокручивается вниз (там находится последнее сообщение)

$(cardBody).scrollTop($(cardBody)[0].scrollHeight);

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

Я могу решить эту проблему, дождавшись страница должна быть полностью загружена перед вызовом scrollTop, однако, если сообщение затем динамически добавляется, я в настоящее время не знаю способа прокрутки вниз, а затем «повторной прокрутки» до нижнего, если любые изображения загружены. Есть ли способ добиться этого?

Answer 1

Вы можете связать событие DOMSubtreeModified, чтобы оно срабатывало при обновлении сообщений.

$(cardBody).bind("DOMSubtreeModified",function(){
   $(this).scrollTop($(this)[0].scrollHeight);
});