Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gustavo Serafim_133196

Barra de Rolagem - Chat

Por , em Javascript

Recommended Posts

Gustavo Serafim_133196    0

Gustavo Serafim_133196
Postado

Olá pessoal! To criando um chat em PHP+MySQL e to com problemas na barra de rolagem....

A altura do corpo do chat é fixa, então ele cria a barra de rolagem. O chat atualiza de 2 em 2 segundos, e sempre que atualiza ele corre até o final da div pra mostrar novas mensagens. Até ai beleza. Porém, se a pessoa rola a barra pra cima pra ler mensagens anteriores, o div atualiza e a barra volta pro final, impossibilitando da pessoa ler as mensagens anteriores...

 

Minha dúvida é: tem como criar uma função onde, se a barra de rolagem estiver no final, atualizar e sempre a barra de rolagem ficar no final, se a barra não estiver no final, não atualizar e não descer a barra.

 

Podem me ajudar?

 

Aqui estão os meus códigos:

<script type="text/javascript">
$(document).ready(function(){
atualiza();
});

function atualiza(){
$.get('msg/?id=<?php echo $_GET['id']; ?>', function(resultado){
$('#tabela').html(resultado);
});

setTimeout('atualiza()', 2000);
}
</script>
<div id="chat_corpo">
<div id="tabela"></div>
</div>

<form method="post" action="" id="chat" name="form">
		<input style="display: none;" type="text" name="user1" value="<?php session_start("login"); echo $_SESSION['ID']; ?>" />
		<input style="display: none;" type="text" name="user2" value="<?php echo $_GET['id']; ?>" />
		<textarea name="msg"></textarea>
 		<input type="submit" name="enviar" value="Enviar" />
</form>

A barra de rolagem fica na div #chat_corpo

 

Espero que possam me ajudar... abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

Tem você faz uma função com o valor atual do scroll e com o valor que foi corrido, compara e se o valor corrigo for menor, ele não chama a função de scroll automático, mas eu "acho" que o correto seria colocar um checkbox para o usuário marcar/desmarcar a opção de rolagem automática.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pixelrafael    7

pixelrafael
Postado

Fiz este script http://jsbin.com/ayiwex/2

Ve se te ajuda. É basicamente isto, se a rolagem não estiver no topo ele escreve "Maior", caso contrário ele escreve "Menor". Agora é só modificar.

Código fonte...

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="conteudo" style="width:300px;height:400px;border:1px solid;overflow:auto;">
      linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>
      linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>
      linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>
      linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>linha<br>
  </div>
  <div id="scroll" style="color:red;"></div>
  <script>
    setInterval(function(){
       var rolagemTop=$("#conteudo").scrollTop();
      if(rolagemTop>0){
        $("#scroll").text("Maior");
      }else{
        $("#scroll").text("Menor");
      }
    }, 1000);
  </script>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito