Haga que un elemento desplazable permanezca & # 8220; en la parte inferior & # 8221; mientras agrega contenido

Question

Estoy creando una página de utilidades para una aplicación web en la que estoy trabajando. Tengo un elemento que quiero usar como " consola " de algún tipo.

Obtengo entradas para la consola a través de llamadas Ajax (usando el Ajax.PeriodicalUpdater del prototipo).

El problema que tengo es que cuando inserto nuevas líneas en la parte inferior de la " consola " ;, la barra de desplazamiento permanece en la posición inicial (por lo que siempre veo las líneas superiores a menos que me desplace hacia abajo manualmente).

¿Cómo puedo hacer que la barra de desplazamiento permanezca automáticamente en la parte inferior?

Estoy usando un prototipo para algunas bibliotecas que lo requieren en este proyecto, por lo que preferiría seguir con eso o con JavaScript normal si es posible.

Solo como una nota, ya probé esto:

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

casi funciona, excepto que siempre está "un paso atrás", y no puedo ver el artículo más reciente.

Answer 1

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

Answer 2

Heh, estaba construyendo casi exactamente lo mismo (una consola Ajax) y tuve problemas con mi div overflow que no se desplazaba hasta el final.

¡Y Stack Overflow me ayudó a resolverlo! ¡Espero que también te ayude!

Desplazamiento de DIVs desbordados con JavaScript

EDITAR: Mi pregunta usaba jQuery, pero el problema no es con el marco JS, es con los atributos CSS que estás usando. Básicamente, necesitas obtener Math.max (div.scrollHeight, div.clientHeight) porque algunos navegadores tienen algunos errores.