0

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?

1 Resposta 1

1

Olha, tente alterar a linha $("#mensagens").animate({scrollTop: variavel},3000); por esta $('#mensagens').animate({ 'scrollTop' : $(document).height() }, 1);

5
  • Olá Mateus... funcionou em partes, o scroll desceu, mas agora quando digito algo no chat, o scroll não acompanha a conversa....
    – user24136
    Commented 12/08/2017 às 20:32
  • Para que ele acompanhe você precisa chamar novamente o codigo $('#mensagens').animate({ 'scrollTop' : $(document).height() }, 1); para que a scroll seja atualizada para baixo a cada envio de mensagem. Commented 12/08/2017 às 21:01
  • Certo... perdoe-me a ignorância, mas sou leigo em Jquery. Como eu faria para chamá-lo novamente?
    – user24136
    Commented 12/08/2017 às 21:11
  • Coloque ele no método enviar() também. Commented 13/08/2017 às 14:09
  • Obrigado Mateus.
    – user24136
    Commented 21/08/2017 às 20:36

Você deve fazer log-in para responder a esta pergunta.