Faire un élément défilant rester "au fond" tout en ajoutant du contenu

Question

Je construis une page d'utilitaire pour une application web sur laquelle je travaille. J'ai un élément que je veux utiliser comme une sorte de "console".

Je reçois des entrées pour la console via des appels Ajax (en utilisant le Ajax.PeriodicalUpdater du prototype). Le problème que j'ai est que lorsque j'insère de nouvelles lignes au bas de la "console", la barre de défilement reste dans la position initiale (donc je vois toujours les lignes supérieures à moins que je défile manuellement vers le bas).

Comment faire en sorte que la barre de défilement reste automatiquement en bas? J'utilise un prototype pour quelques bibliothèques qui en ont besoin dans ce projet, donc je préférerais garder ce javascript si possible.

Tout comme une note, je l'ai déjà essayé ceci:

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

Il presque œuvres, sauf qu'il est toujours « un pas en arrière », et je ne vois pas l'élément le plus récent.

Answer 1

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

Answer 2

Heh, je construisait presque exactement la même chose (une console Ajax) et a eu des problèmes avec mon débordés div pas Scolling tout le chemin vers le bas.

Et Stack Overflow m'a aidé à le résoudre! J'espère que cela vous aide aussi!

Scrolling Overflowed DIVs with JavaScript

EDIT: Ma question utilisée jQuery, mais le problème est pas avec le cadre JS il est avec le CSS attributs que vous utilisez. Fondamentalement, vous devez obtenir Math.max (div.scrollHeight, div.clientHeight) car certains navigateurs sont un peu bogués avec ces attributs.