Faça um elemento estadia de rolagem “na parte inferior” conteúdo ao adicionar

Question

Estou construindo uma página de utilidade para uma aplicação web que eu estou trabalhando. Eu tenho um elemento que eu quero usar como um "console" das sortes.

Eu obter entradas para o console através de chamadas Ajax (usando Ajax.PeriodicalUpdater de protótipo).

O problema que estou tendo é que quando eu inserir novas linhas para a parte inferior do "console", as estadias de barra de rolagem na posição inicial (então eu sempre ver as linhas superiores a menos que eu rolar manualmente para baixo).

How I pode fazer a barra de rolagem ficar automaticamente no fundo?

Eu estou usando protótipo para algumas bibliotecas que necessitam dele neste projeto, então eu preferiria ficar com isso ou javascript regular, se possível.

Assim como uma nota, eu já tentei isso:

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

quase obras, exceto que ele é sempre "um passo atrás", e eu não posso ver o item mais recente.

Answer 1

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

Answer 2

Heh, eu estava construindo quase exatamente a mesma coisa (um console Ajax) e questões tive com o meu div transbordada não scolling todo o caminho até o fundo.

E Stack Overflow me ajudou a resolvê-lo! Espero que ajude você também!

Scrolling transbordadas DIVs com JavaScript

EDIT: Minha pergunta usado jQuery, mas o problema não é com o quadro JS é com o CSS atributos que você está usando. Basicamente, você precisa obter Math.max (div.scrollHeight, div.clientHeight), porque alguns navegadores são um pouco buggy com esses atributos.