Ir para conteúdo
Fórum Script Brasil
  • 0

JavaScritp: Rolagem de scroll automatico


LeoKringer

Pergunta

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!

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0

use uma variável para armazenar os dados do chat.

depois utilize uma segunda variável quando o valor e recebido pelo ajax, verificando assim se o valor e diferente.

exemplo:

var chat_n = "";
var chat_a = "";
$.ajax({
 
   url: "PHP/ler.php",
   type: "GET",
  
   success: function(dados){
 
      var chat_n = dados;
 
   }
  
 
});
 
if(chat_n != chat_a) {
 
   $("#Mensagem").html(chat_n);
   chat_a = chat_n;
 
}

eu não testei o código, portanto não sei se funciona, mas já fiz um código parecido e funcionou muito bem e funciona ate hoje, mas usei json também., se quiser conferir cadastre-se, http://www.opinber.com

Link para o comentário
Compartilhar em outros sites

  • 0

Ola,

Se eu fizer isso assim que receber a mensagem a barra de rolagem vai descer.

A ideia é a barra de rolagem descer automaticamente, POREM caso a pessoa queira subir para ver uma conversa anterior, a barra de rolagem pare de rolar ate que o usuario a coloque novamente no final da conversa, quando ela volta a automaticamente descer junto com a conversa...

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...