Jump to content
Fórum Script Brasil
  • 0

Problemas com barra de rolagem em DIV


Lucas Moreira
 Share

Question

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 to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 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 to comment
Share on other 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 to comment
Share on other 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 to comment
Share on other 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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      150.9k
    • Total Posts
      648.8k
×
×
  • Create New...