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

Problemas com barra de rolagem em DIV


Lucas Moreira

Pergunta

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

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

<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

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.



  • Estatísticas dos Fóruns

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