Boa tarde,
Estou criando uma chat (inicialmente em PHP, mas vou passar para JAVA) no qual na div denominada "Mensagem" eu carrego a conversa que foi gerada.
Atraves de JavaScript/Ajax, eu acesso o arquivo PHP e trago a conversa que foi gravada, colocando os dados desse arquivo na div Mensagem. Por motivos obvios, depois de um numero X de mensagem, gera-se um scroll nessa div. Usando CSS, configurei um "overflor:auto" que gera o scroll vertical.
Inicialmente, eu não conseguia fazer a barra de rolagem (scroll) descer, mostrando a ultima mensagem enviado. Atraves do codigo abaixo, consegui fazer isso...
$(document).ready(function()
{
setInterval(function(){
lerMensagem();
var textArea = document.getElementById('Mensagem');
textArea.scrollTop = textArea.scrollHeight;
},1000);
});
Entretanto, se eu quero ler uma mensagem anterior, acima e fora do campo de visao, ao subir manualmente o scroll (clicando na barra de rolagem e subindo OU no mouse, rolando o scroll pra cima), o codigo acima faz com que o scroll desça, não me permitindo ler o que desejo da conversa.
Como posso resolver esse problema ?
Segue abaixo os codigos que estou utilizando...
index.php
<html>
<head>
<title>Chat vBeta</title>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/chat.js"></script>
</head>
<body>
<div id="Mensagem" style="overflow:auto;">
</div>
<form method="post" action="#" name="frmChat" id="frmChat">
<textarea name="txtMensagem" id="txtMensagem" style="width:100%;" onKeyPress="handleInputFieldKeyPress(event);"></textarea>
</form>
</body>
</html>
chat.js
$(document).ready(function()
{ //Quando o documento estiver pronto ele executa os códigos abaixo.
setInterval(function(){ //Aqui foi criado um temporizador, a cada 3 segundos ele executa o código abaixo
lerMensagem();
var textArea = document.getElementById('Mensagem');
textArea.scrollTop = textArea.scrollHeight;
},1000); // 1000 é o mesmo que 1 segundos, recomendo que usem 5 no minimo dependendo do servidor.
});
function lerMensagem() {
$("#Mensagem").load("PHP/ler.php") //Dentro da div Mensagem incluo o código php que exibe o texto do txt
}
OBRIGADO!