Сделайте так, чтобы содержимое div росло внутри родительского

Question

Мне нужно создать определенное содержимое div для имитации прокрутки при добавлении новых данных, вроде чата на Facebook. Как мне это сделать? Я использую jQuery.

Вот пример разметки:

<div id="chat-messages">
   <div class="msg">John Doe says : Hi!</div>
</div>

Answer 1

Во-первых, вам нужно установить фиксированную высоту (height: 400px) для контейнера div (сообщения чата) и прокрутки (overflow-y:scroll) для вертикального содержимого, чтобы прокрутка появилась.

Далее, когда новое сообщение опубликовано, вам нужно прокрутить вниз с помощью JavaScript.Например:

$(".chat-messages").attr({ scrollTop: $(".chat-messages").attr("scrollHeight") });

Или анимировать свиток:

$(".chat-messages").animate({ scrollTop: $("chat-messages").attr("scrollHeight") }, 1000);

Answer 2

Решения найдены аналогично тому, что вы описываете:

• Загрузка данных с сервера при прокрутке с помощью jQuery AJAX: http://www.codeproject.com/Articles/239436/Load-Data-From-Server-While-Scrolling-Using-JQuery

Здесь есть и другие решения:

• Прокрутка элемента div с помощью jQuery
• jQuery Прокрутка к элементу Div
• Прокрутка к элементу div с помощьюJQuery

Answer 3

Это добавит новый контент в конец div. Я думаю, это то, что вы хотите.

$('#chat-messages').append(newdiv);

Но я думаю, что вам нужно немного почитать. Проверьте это .