Barra de rolagem ficar sempre embaixo
Boa tarde, estou implementando um mini chat com Primefaces que ele salva as mensagens e as pega no sgbd postgres, porém estou tendo um problema quanto a atualização desses dados, pois sempre que o poll atualiza os dados a barra de rolagem sobe, já fiz um pequeno código javascript para tentar resolver, mas não deu certo :( segue meu codigo :
<p:poll interval="1" listener="#{chatBean.listar}"
update="form:mensagens" />
<p:scrollPanel mode="native" style="width:650px;height:500px"
id="mensagens" >
<table style="width: 630px; height: 80px">
<tr jsfc="ui:repeat" value="#{chatBean.historicoList}" var="c">
<td style="text-align: #{c.tipo == 'web'? 'right': 'left'};
background-color: #{c.tipo == 'web' ? '#F7F2E0' : '#F2F2F2'}; border: 1px solid white;">#{c.valor}</td>
</tr>
</table>
</p:scrollPanel>
<br />
<p:inputTextarea value="#{chatBean.mensagem}" rows="2" cols="88"
required="false" autoResize="false" />
<br />
<h:commandButton value="Enviar"
action="#{chatBean.salvarMensagensEnviadasPorUmaPessoa}"
class="btn btn-success" />
<h:commandButton value="Sair" action="#{chatBean.sair}"
class="btn btn-danger" />
</p:panel>
</h:form>
</ui:define>
<script type="text/javascript">
var mensagens = document.getElementById('form:mensagens');
mensagens.scrollTop = mensagens.scrollHeight - mensagens.clientHeight;
</script>
como eu faço a barra de rolagem ficar sempre embaixo ?
<p:poll interval="1" listener="#{chatBean.listar}"
update="form:mensagens" />
<p:scrollPanel mode="native" style="width:650px;height:500px"
id="mensagens" >
<table style="width: 630px; height: 80px">
<tr jsfc="ui:repeat" value="#{chatBean.historicoList}" var="c">
<td style="text-align: #{c.tipo == 'web'? 'right': 'left'};
background-color: #{c.tipo == 'web' ? '#F7F2E0' : '#F2F2F2'}; border: 1px solid white;">#{c.valor}</td>
</tr>
</table>
</p:scrollPanel>
<br />
<p:inputTextarea value="#{chatBean.mensagem}" rows="2" cols="88"
required="false" autoResize="false" />
<br />
<h:commandButton value="Enviar"
action="#{chatBean.salvarMensagensEnviadasPorUmaPessoa}"
class="btn btn-success" />
<h:commandButton value="Sair" action="#{chatBean.sair}"
class="btn btn-danger" />
</p:panel>
</h:form>
</ui:define>
<script type="text/javascript">
var mensagens = document.getElementById('form:mensagens');
mensagens.scrollTop = mensagens.scrollHeight - mensagens.clientHeight;
</script>
como eu faço a barra de rolagem ficar sempre embaixo ?
Paulo Lima
Curtidas 0