Сделать прокручиваемый элемент оставаться «внизу» при добавлении контента

Question

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

Я получаю записи для консоли через Ajax-вызовы (используя прототип Ajax.PeriodicalUpdater).

Проблема, с которой я столкнулся, заключается в том, что когда я вставляю новые строки в нижнюю часть «консоли», полоса прокрутки остается в исходном положении (поэтому я всегда вижу верхние строки, если вручную не прокручивать вниз).

Как сделать так, чтобы полоса прокрутки автоматически оставалась внизу?

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

Как примечание, я уже пробовал это:

onComplete: function() { 
    $('console').scrollTop = $('console').scrollHeight;
}

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

Answer 1

new Ajax.PeriodicalUpdater(container, url, {
    onComplete: function() {
        (function() {
            container.scrollTop = container.scrollHeight;
        }).defer();
    }
});

Answer 2

Хех, я строил почти то же самое (консоль Ajax), и у меня были проблемы с моим переполненным модулем div, не прокручивавшимся до самого дна.

И Stack Overflow помог мне решить эту проблему! Надеюсь, это вам тоже поможет!

Прокрутка переполненных DIV с помощью JavaScript

РЕДАКТИРОВАТЬ: Мой вопрос использовал jQuery, но проблема не в инфраструктуре JS, а в используемых вами атрибутах CSS. По сути, вам нужно получить Math.max (div.scrollHeight, div.clientHeight), потому что некоторые браузеры немного глючат с этими атрибутами.