Динамический div не автоматически прокручивается

Question

Это расширение моего предыдущего вопроса How to fix a div height.

Спасибо, что помогли мне исправить размер.

Но после этого я наткнулся на свою последнюю проблему. т.е. прокрутки.

Когда пользователь вводит сообщение и попадает в него, добавляются два новых div. один с пользовательскими данными, а другой с данными ответа.

Данные генерируются правильно, но в окне чата вместо показа последнего div отображается предыдущий div.

Выходной ток

Ожидаемый выход

Я посетил некоторые SO форумы, но ни один из них не сделал трюк.

Пожалуйста, дайте мне знать, как я могу это исправить.

Благодаря

Answer 1

Каждый раз, когда новый DIV добавляется в окно чата, вы необходимо прокрутить div с помощью JavaScript или jQuery.

что-то вроде:

Для использования JQuery:

$('#chatHistory').scrollTop($('#chatHistory').scrollHeight);

Для простого JavaScript:

elmnt = document.getElementById("chatHistory");
elmnt.scrollTop = elmnt.scrollHeight;

Это похоже на: Use jQuery to scroll to the bottom of a div with lots of text

Answer 2

Вы можете адаптировать этот код к вашей ситуации: [your_element].scrollTop = [your_element].scrollHeight

Для получения дополнительной информации вы можете проверить этот вопрос: Scroll Automatically to the Bottom of the Page