Fai in modo che un elemento scorrevole rimanga "in fondo" durante l'aggiunta di contenuti

Question

Sto creando una pagina di utilità per un'app Web su cui sto lavorando. Ho un elemento che voglio usare come "console" di sorta.

Ricevo le voci per la console tramite chiamate Ajax (usando il Ajax.PeriodicalUpdater del prototipo).

Il problema che sto riscontrando è che quando inserisco nuove righe nella parte inferiore della "console", la barra di scorrimento rimane nella posizione iniziale (quindi vedo sempre le linee superiori a meno che non scorra manualmente verso il basso).

Come posso fare in modo che la barra di scorrimento rimanga automaticamente in basso?

Sto usando il prototipo per alcune librerie che lo richiedono in questo progetto, quindi preferirei attenermi a questo o javascript normale, se possibile.

Proprio come una nota, ho già provato questo:

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

quasi funziona, tranne per il fatto che è sempre " un passo indietro " e non riesco a vedere l'elemento più recente.

Answer 1

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

Answer 2

Heh, stavo costruendo quasi esattamente la stessa cosa (una console Ajax) e ho avuto problemi con il mio div overflow che non scorreva fino in fondo.

E Stack Overflow mi ha aiutato a risolverlo! Spero che ti aiuti anche tu!

DIV a scorrimento in overflow con JavaScript

EDIT: la mia domanda ha usato jQuery, ma il problema non è con il framework JS ma con gli attributi CSS che stai usando. Fondamentalmente è necessario ottenere Math.max (div.scrollHeight, div.clientHeight) perché alcuni browser sono un po 'difettosi con questi attributi.