Сделайте так, чтобы прокручиваемый элемент оставался “внизу” при добавлении содержимого

Question

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

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

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

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

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

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

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

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

Answer 1

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

Answer 2

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

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

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

Редактировать:В моем вопросе использовался jQuery, но проблема не в JS framework, а в используемых вами атрибутах CSS.По сути, вам нужно получить Math.max(div.scrollHeight, div.clientHeight), потому что некоторые браузеры немного глючат с этими атрибутами.