Question

Buen día para todos, necesito la colaboración de alguien que conozca como hago para enviar la barra del scroll hacia abajo; estoy desarrollando un chat y al insertar el texto, este va quedando en al parte inferior, pero el scroll se queda intacto, lo que necesito es que el scroll baje y siempre muestre lo mas reciente.

Un ejemplo para que tengan una idea de lo que quiero, es el por ejemplo como funciona el chat de facebook, siempre muestra lo mas reciente en la parte inferior y lo mas viejo se va subiendo. Si se desea ver algo de lo anterior, solo es mover el scroll, pero al tener un mensaje nuevo, el scroll bajara solo.

Estoy utilizando bootstrap:

<div class="chat-body clearfix">
<strong class="primary-font">Nombre</strong>
<p class="content"></p>
</div>

Por ejemplo, como lo harán en este DEMO: enter link description here

Answer 1

hola @manueltato11, intenta usando las propiedades scrollTop y scrollHeight del elemento contenedor ( la caja del chat )

var chatBox;

chatBox = document.querySelector('.chat-body > .content');

// cuando exista un nuevo mensaje
chatBox.scrollTop = chatBox.scrollHeight;

http://jsfiddle.net/v9bc1pxz/