Принудительная прокрутка вниз

Question

Я делаю небольшую систему обмена сообщениями / чата, которая работает хорошо и отлично. Проблема в том, что <div>, на который выводятся сообщения, не прокручивается так, как мне нужно.

Все новые сообщения добавляются в конец div, а когда добавляются другие и появляется полоса прокрутки, прокрутка остается в верхней части <div>. Мне нужно, чтобы это было наоборот, чтобы прокрутка всегда придерживалась нижней части <div>.

Хорошим примером того, что я хочу, может быть Окна чата Steam или даже этот текстовый ввод, который я использую для заполнения вопроса.

Поскольку я хотел бы избежать jQuery , это меня полностью застряло. Если бы вы могли указать мне правильное направление, это было бы здорово! Я не уверен, могут ли HTML и CSS справиться с этим, или если JavaScript вообще необходим.

Answer 1

Приведенный ниже код Javascript должен держать полосу прокрутки вашего div в нижнем положении, как вы описали:

var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;

Это решение и дополнительную информацию можно найти по ссылке ниже: http://web.archive.org/web/20080821211053/http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html

Answer 2

Я думаю, что это лучшее решение:

element.scrollTop = element.scrollHeight - element.clientHeight;