1

Bom dia, estou com a seguinte duvida, estou a tentar fazer 1 chat, e sempre que uma mensagem e recebida, ou enviada, queria que o scroll fica-se em baixo, estou Utilizando Meteor e sou novo nisto, tentei o seguinte

Tenho o seguinte código html

<div class="chat">
         {{#each mensagens}}
            {{> list}}
         {{/each}}
       </div>

        <form class="Insert">
            <br> <br>
             <center>
                <input type="text" name="text"> <br><br>
                <input type="submit" value="Enviar">
            </center>
            <br>
        </form>

e o seguinte código no JS

Template.chat.helpers({
 scroll: function(){
  var objDiv = document.getElementById("chat");
  objDiv.scrollTop = objDiv.scrollHeight;)
 }});
1

1 Resposta 1

1

Esse exemplo acho que pode te ajudar.

Ele já começa de baixo para cima e o scroll sempre fica na base do container

$('#chatmessages').scrollTop($('#chatmessages')[0].scrollHeight);
#chatbox {
    overflow:   none;
    position:   relative;
    width:      100%;
    height:     200px;
    border: 1px solid #ccc;
}
#chatmessages
{
    overflow:   auto;
    position:   absolute;
    bottom:     0;
    width: 100%;
    max-height: 200px;
}
#chatmessages div {
    border:1px solid #e2e4e3;
    border-radius: 5px;
    margin:5px;
    padding:10px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="chatbox">
    <div id="chatmessages">
        <div>Hi </div>
        <div>Hello </div>
        <div>How are you ?</div>
        <div>I am fine, Thanks ! </div>
        <div>And how about you? </div>
    </div>
</div>

Fonte


Bonus: Gambeta para fazer apenas com CSS. Se trata de uma div rotacionada para ficar de cabeça para baixo, depois uso direction:rtl para voltar a barra de scroll para direita e text-align:left para ajustar o texto (dica do @lazyFox =D ). Depois o conteúdo da mensagens é rotacionado ao contrario para ficar de cabeça para cima.

.scrollable {
    transform-origin: 50% 50%; 
    transform: rotate(180deg); 
    border: 1px solid;
    width: 120px; 
    height: 120px; 
    overflow-y: auto;
    direction: rtl;
    text-align: left;
}
.message {
    padding: 0.5em;
}
.messages_wrap {
    float: left;
    width: 100%; 
    transform: rotate(180deg);
}
<div class="scrollable">
    <div class="messages_wrap">
        <div class="message">Your message1</div>
        <div class="message">Your message2</div>
        <div class="message">Your message3</div>
        <div class="message">Your message4</div>
        <div class="message">Your message5</div>
        <div class="message">Your message6</div>
        <div class="message">Your message7</div>
        <div class="message">Your message8</div>
        <div class="message">Your message9</div>
    </div>
</div>

6
  • 1
    Magia negra com css XD já agora experimente adicionar direction:rtl; para finalizar o feitiço. E um text-align:left para ignorar.
    – lazyFox
    8/05/2018 às 14:55
  • 1
    Hahaha muito bom @lazyFox já até editei na resposta, agora a gambeta ficou nivel Jedi ! Valeu a dica!
    – hugocsl
    8/05/2018 às 15:04
  • nao estou mesmo a conseguir, eu sou novo a trabalhar com meteor
    – Ricardo
    8/05/2018 às 15:39
  • 1
    boa ideia, gostei
    – Ricardo
    10/05/2018 às 13:44
  • @Roberto que bom que agora ficou mais claro pra vc e funcionou. Qualquer outra dúvida é só perguntar. Boa sorte com o projeto.
    – hugocsl
    10/05/2018 às 13:46

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .