estou desenvolvendo uma aplicação onde o usuário faz uma pergunta e o servidor entrega uma resposta, estou com o problema em fazer com que a barra de rolagem vá acompanhando a conversa, até o momento estou tendo o histórico da conversa na tela porém tenho que arrastar com o mouse para ver as novas mensagens. Estou utilizando JSF com AJAX .
<div id="perguntaResposta">
<ul class="messages">
<h:panelGroup id="dialogo">
<ui:repeat var="conversa" value="#{chat.conversas}">
<h:panelGroup rendered="#{conversa.usuario == 1}">
<li class="message right appeared">
<div class="avatar"></div>
<div class="text_wrapper">
<h:outputText value="#{conversa.intereacaoFala}" />
</div>
</li>
</h:panelGroup>
<h:panelGroup rendered="#{conversa.usuario == 2}">
<li class="message left appeared">
<div class="avatar"></div>
<div class="text_wrapper">
<h:outputText value="#{conversa.intereacaoFala}"/>
</div>
</li>
</h:panelGroup>
</ui:repeat>
</h:panelGroup>
</ul>
</div>