Tenho um chat que foi desenvolvido em Bootstrap, PHP, Mysql e Jquery. A estrutura está dessa forma:
HMTL
<div class="chat-panel panel panel-primary chat-boder chat-panel-head" >
<div class="panel-heading">
<i class="fa fa-comments fa-lg"></i>
Chat
</div>
<div id="mensagens"></div>
<div class="panel-footer">
<form onsubmit="enviar();return false" method="post" action="">
<div class="input-group">
<input id="mensagem" type="text" class="form-control input-sm" placeholder="Coloque sua mensagem..." />
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-sm">
Enviar
</button>
</span>
</div>
</form>
</div>
</div>
JQuery
$(document).ready(function() {
var variavel = document.getElementById("mensagens").scrollHeight;
$("#mensagens").animate({scrollTop: variavel},3000);
carregarmensagens();
setInterval(function(){
carregarmensagens();
},1000);
});
function carregarmensagens() {
var url;
url = "chat/ver-mensagens.php";
jQuery.get(url,function(data) {
$("#mensagens").empty().append(data);
});
}
function enviar() {
var url;
var mensagem;
var enviando;
url = "chat/enviar-mensagem.php";
mensagem = $("#mensagem").val();
enviando = $.post(url, {mensagem:mensagem});
enviando.done(function() {
document.getElementById("mensagem").value = "";
carregarmensagens();
});
}
chat/ver-mensagens.php
<div class="panel-body">
<ul class="chat-box">
<?php
while($jm = mysqli_fetch_object($sql)){
....
<li class="<?php echo $class; ?> clearfix" style="background-color: <?php echo $fundo; ?>">
<span class="chat-img <?php echo $pull; ?>">
<img src="<?php echo $img; ?>" alt="Admin" class="img-circle" style="width: 60px" />
</span>
<div class="chat-body clearfix">
<small class=" text-muted">
<i class="fa fa-clock-o fa-fw"></i>?php $jm->Hora; ?></small>
<strong class="<?php echo $pull; ?>"><?php echo $jm->Usuarios; ?></strong>
<p>
<?php echo $jm->Mensagem; ?>
</p>
</div>
</li>
<?php } ?>
O problema é que o scroll fica preso no topo, não consigo fazer acompanhar o chat. Como poderia corrigir isso?