Scroll from bottom to top

Asked

Viewed 1,061 times

0

I have a div that encompasses a chat, I load the last 15 messages, but the problem is that I want her scroll to start from top to bottom, that is, from the newest to the oldest messages.

NOTE: This one div is overflow: auto. And I want the scroll to start from the bottom once the page is loaded.

The entire CSS code:

.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;
}

HTML and only div and several subdivs with the message loop (I’m doing the system layout yet) Print: inserir a descrição da imagem aqui I want the scroll to look like this when the page loads.

jquery html css javascript

  • Put what you already tried, or at least HTML to figure out where to 'mess' sff

  • I hope now it is very detailed haha

  • Thank you. Have some JS?

  • What did I do? Not yet, I was thinking of using Document.getElementById('panel-msg'). scrollTo(0,10000); Ai put as onload, but will the messages are giant or whatever? I wanted a more efficient way that was not gambiarra!

  • And I think it only works with window

2 answers

2


You can do so, give a scrollTop with the height of the div

var divMensagens = document.getElementById('mensagens');
var height = divMensagens.scrollHeight;
divMensagens.scrollTop(height);

  • It worked! Thanks!

  • Fernando, gave an Edit. So it’s just native JS. I hope it’s ok. +1

  • Okay, @Sergio thanks!

-2

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

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

objDiv.scrollTop = objDiv.scrollHeight;

Browser other questions tagged jquery html css javascript

You are not signed in. Login or sign up in order to post.