JavaScritp: Rolagem de scroll automatico

LeoKringer · Abril 3, 2014

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>

</head>

<body>

</div>

</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!

Michael Douglas · Abril 12, 2014

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

LeoKringer · Abril 15, 2014

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...

Entrar

JavaScritp: Rolagem de scroll automatico

Pergunta

LeoKringer

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Michael Douglas

Link para o comentário

Compartilhar em outros sites

LeoKringer

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades