Faire en sorte qu'un élément défilable reste «en bas» lors de l'ajout de contenu

Question

Je construis une page d’utilitaire pour une application Web sur laquelle je travaille. J'ai un élément que je souhaite utiliser comme "console". de toutes sortes.

Je reçois des entrées pour la console via des appels Ajax (à l'aide du Ajax.PeriodicalUpdater du prototype).

Le problème que je rencontre est que, lorsque j'insère de nouvelles lignes au bas de la "console", la barre de défilement reste en position initiale (je vois donc toujours les premières lignes à moins que je ne descende manuellement).

Comment faire pour 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; je préférerais donc rester avec cela ou le javascript classique si possible.

Juste comme note, j'ai déjà essayé ceci:

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

Cela fonctionne presque , sauf qu'il est toujours "un pas en arrière" et que 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

Hé, je construisais presque exactement la même chose (une console Ajax) et je rencontrais des problèmes avec mon div débordé qui ne filait pas jusqu'au fond.

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

Défilement de DIVs débordées avec JavaScript

EDIT: Ma question utilisait jQuery, mais le problème ne concerne pas le framework JS, mais les attributs CSS que vous utilisez. En gros, vous devez obtenir Math.max (div.scrollHeight, div.clientHeight) car certains navigateurs sont un peu buggés avec ces attributs.