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

Problemas com barra de rolagem em DIV

Lucas Moreira

Perguntado por Lucas Moreira,

 Share

Pergunta

Lucas Moreira

Lucas Moreira

Postado
Postado

Olá,

Estou tentando criar um sistema de chat, isso pelo fato de ser cabeça dura e não querer baixar um script.

Estou tendo dificuldades com a barra de rolagem dentro da DIV, ela teria que que ficar de forma automatica no fim para exibir a ultima mensagem.

Eu pesquisei varias formas de resolver isso envolvendo javascript e deu certo, toda vez que a pagina da o refresh a barra de rolagem vai até o fim...mas, ela faz o trajeto do topo da DIV até o fim.

'

Não há nenhuma maneira da barra de rolagem se fixar direto no fim da div depois do refresh?

Esta certo que esse "bug" é de segundos, mas receio pela banda do cliente e a quantidade de possoas que possa ter deixar a coisa pior.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="2" name="#rodape"> 
<title>Untitled Document</title>

&lt;script>
window.onload = function(){
   var intervalo = setInterval("document.getElementById('rolardiv').scrollTop = 1000000;", 200);
}
</script>
  
</head>

<body>   
<div id="rolardiv" style='width:500px; height:200px; overflow:auto; border:solid 2px #009999'>
<?

require('../adm/con_avc.php');

$chat= "SELECT * FROM chat_msg";        
$query_chat = mysql_query($chat) or exit(mysql_error());       
while($chat = mysql_fetch_array($query_chat)){

$nick_msg        =$chat['nick_msg'];
$data_msg        =$chat['data_msg'];
$emo_msg        =$chat['emo_msg'];
$msg_msg        =$chat['msg_msg'];
$msg_msg2        =wordwrap($msg_msg, 70, "<br />\n", true);

echo"<div style='color:#666666; font-family:Arial, Helvetica, sans-serif; font-size:12px'>$nick_msg - $data_msg</div>
     <div style='color:#006699; font-family:Arial, Helvetica, sans-serif; font-size:14px'>$emo_msg $msg_msg2</div><br><br>";
}

?>
</div>
</body>
</html>

Link para o comentário
Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

  • 0
rickayron

rickayron

Postado
Postado
Olá,

Estou tentando criar um sistema de chat, isso pelo fato de ser cabeça dura e não querer baixar um script.

Estou tendo dificuldades com a barra de rolagem dentro da DIV, ela teria que que ficar de forma automatica no fim para exibir a ultima mensagem.

Eu pesquisei varias formas de resolver isso envolvendo javascript e deu certo, toda vez que a pagina da o refresh a barra de rolagem vai até o fim...mas, ela faz o trajeto do topo da DIV até o fim.

'

Não há nenhuma maneira da barra de rolagem se fixar direto no fim da div depois do refresh?

Esta certo que esse "bug" é de segundos, mas receio pela banda do cliente e a quantidade de possoas que possa ter deixar a coisa pior.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="2" name="#rodape"> 
<title>Untitled Document</title>

&lt;script>
window.onload = function(){
   var intervalo = setInterval("document.getElementById('rolardiv').scrollTop = 1000000;", 200);
}
</script>
  
</head>

<body>   
<div id="rolardiv" style='width:500px; height:200px; overflow:auto; border:solid 2px #009999'>
<?

require('../adm/con_avc.php');

$chat= "SELECT * FROM chat_msg";        
$query_chat = mysql_query($chat) or exit(mysql_error());       
while($chat = mysql_fetch_array($query_chat)){

$nick_msg        =$chat['nick_msg'];
$data_msg        =$chat['data_msg'];
$emo_msg        =$chat['emo_msg'];
$msg_msg        =$chat['msg_msg'];
$msg_msg2        =wordwrap($msg_msg, 70, "<br />\n", true);

echo"<div style='color:#666666; font-family:Arial, Helvetica, sans-serif; font-size:12px'>$nick_msg - $data_msg</div>
     <div style='color:#006699; font-family:Arial, Helvetica, sans-serif; font-size:14px'>$emo_msg $msg_msg2</div><br><br>";
}

?>
</div>
</body>
</html>

<script type="text/javascript">

<!--

i = 0;

tempo = 50;

tamanho = 826; // tamanho da barra de rolagem >> Ver arquivo Leiame.txt

function Rolar() {

document.getElementById('painel').scrollTop = i;

i++;

t = setTimeout("Rolar()", tempo);

if (i == tamanho) {

i = 0;

}

}

function Parar() {

clearTimeout(t);

}

//-->

</script>

tente isso, basta voce adequar essa função a sua necessidade..

ate mais.

Link para o comentário
Compartilhar em outros sites
  • 0
Lucas Moreira

Lucas Moreira

Postado
  • Autor
Postado

rickayron, desde já obrigado pela atenção.

Esse script não resolve meu problema com o chat, mas resolve outro. Eu tentei fazer umas alterações em valores mas nada adiantou.

Sou ainda uma negação de javascript, sei apenas aquele basico pra trabalhar com links (voltar, refresh).

:(

Link para o comentário
Compartilhar em outros sites
  • 0
Lucas Moreira

Lucas Moreira

Postado
  • Autor
Postado 

<script>
function toBottom(){
    if(document.all){
        window.scroll(0, document.body.clientHeight);
    }else{
        window.scroll(0,2000)
    }
   }
</script>

</head>

<body onLoad="toBottom()">

Coloquei isso no meu script, mas fica com o mesmo efeito. Dei uma pesquisada e o pessoal fala em AJAX, mas não tenho a minima idéia de como isso funciona. :(

Desde já, agradeço a toda ajuda

Link para o comentário
Compartilhar em outros sites
  • 0
Bruno.trp

Bruno.trp

Postado
Postado

Olá. Primeiramente quero agradecer por este post, que me ajudou.

Estou utilizando este script . Porém ele fica travado a barra na parte de baixo.

<script>
window.onload = function(){
var intervalo = setInterval("document.getElementById('tabelafinanceira').scrollTop = 10000;", 200);
}
</script>
Gostaria de saber se tem como ele deixar na parte de baixo somente no refresh, e depois liberar a barra para movimentação?
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.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...