0

Tenho uma div que engloba uma chat, carrego as 15 últimas mensagens, mas o problema é que quero que o scroll dela comece de cima para baixo, ou seja, das mensagens mais novas para as mais antigas.

OBS.: Essa div está com overflow: auto. E quero que o scroll comece do bottom assim que a página for carregada.

Todo o código CSS:

.panel-content .panel-group-msgs{
    width: 100%;
    height: 350px;
    overflow: auto;
    margin-top: 10px;
    padding: 20px;
    background-color: #EBF0F0 !important;
}
.panel-content .panel-group-msgs::-webkit-scrollbar-track {
    background-color: transparent;
}
.panel-content .panel-group-msgs::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
.panel-content .panel-group-msgs::-webkit-scrollbar-thumb {
    background: #dad7d7;
    border-radius: 6px;
}

O HTML e só a div e várias subdivs com o loop das mensagens (Esto fazendo o layout do sistema ainda) Print: inserir a descrição da imagem aqui Quero que o scroll fique assim quando a página carregar.

5
  • Coloque o que já tentou, ou pelo menos o HTML para percebermos onde é para 'mexer' sff
    – Miguel
    17/07/2016 às 16:28
  • Espero que agora esteja bem detalhado haha
    – Artur
    17/07/2016 às 16:38
  • Obrigado. Tem algum JS?
    – Miguel
    17/07/2016 às 16:39
  • Que eu fiz? Ainda não, eu tava pensando em usar document.getElementById('panel-msg').scrollTo(0,10000); Ai colocar como onload, mas vai que as mensagens são gigantes ou sei lá? Queria uma modo mais eficiente que não fosse gambiarra!
    – Artur
    17/07/2016 às 16:46
  • E accho que só funciona com window
    – Artur
    17/07/2016 às 16:48

2 Respostas 2

2

Você pode fazer assim, dar um scrollTop com a altura da div

var divMensagens = document.getElementById('mensagens');
var height = divMensagens.scrollHeight;
divMensagens.scrollTop(height);
3
  • Funcionou! Valeu!
    – Artur
    17/07/2016 às 16:51
  • Fernando, deu um edit. Assim fica só JS nativo. Espero que seja ok. +1
    – Sergio
    17/07/2016 às 17:17
  • OK, @Sergio valeu! 17/07/2016 às 17:30
-2

var objDiv = document.getElementById("div_chat");

var objDiv = document.getElementById("div_chat");
objDiv.scrollTop = objDiv.scrollHeight;

objDiv.scrollTop = objDiv.scrollHeight;

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

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