I have a chat, and as you know, I have to make it scroll in some way where the messages are seen. For that I have the property overflow and I put the value to him auto, but this does not show the last message once it is sent, it is necessary to do scrolldown, and I want that you do not have to do scrolldown so that it is shown. I do not know if I can understand.
You should match scrollTop to scrollHeight , something like this:
document.addEventListener('DOMContentLoaded', function() {
let boton = document.getElementById("dale");
dale.onclick = function() {
var chatDiv = document.getElementById("loMensaje");
var newEl = document.createElement('p');
newEl.appendChild(document.createTextNode('Nuevo mensaje!' + Math.floor((Math.random() * 100) + 1)));
chatDiv.appendChild(newEl);
chatDiv.scrollTop = chatDiv.scrollHeight;
}
});.contenedor {
position: relative;
}
#loMensaje {
position: absolute;
top: 30px;
width: 480px;
height: 80px;
overflow: auto;
}
p {
padding: 2px;
margin: 2px;
background: #fafafa;
}<div class="contenedor">
<button id="dale">chat me plz</button>
<div id="loMensaje">
</div>
</div>