3

Tengo un chat, y como saben, tengo que hacer que de alguna manera donde se ven los mensajes se pueda hacer scroll. Para eso tengo la propiedad overflow y le pongo el valor auto, pero este no muestra el ultimo mensaje una vez que es enviado, hay que hacer scrolldown, y yo quiero que no tengas que hacer scrolldown para que se muestre. No se si me doy a entender.

2
  • 1
    Para que te puedas dar a entender mejor publica el código de tu avance y una explicación breve del mismo Commented el 23 jul. 2018 a las 13:38
  • 1
    Hola Diesan, deberías añadir un ejemplo mínimo verificable para ver tu problema y poder ayudarte de manera concreta con lo que necesites. Con lo que has puesto ahora mismo, sabemos cuál es el problema, pero sin el código es difícil darte una respuesta precisa. Lee Cómo preguntar para más información y edita la pregunta.
    – Alvaro Montoro
    Commented el 23 jul. 2018 a las 13:38

1 respuesta 1

4

Tendrías que igualar el scrollTop al scrollHeight, algo así :

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>

3
  • Gracias por tu contribución, pero responder preguntas que están realizadas sin seguir lo definido en Cómo preguntar provoca que el sitio tenga contenido de baja calidad, ayúdanos a orientar al OP a crear preguntas de buena calidad que sean útiles para toda la comunidad.
    – Jorgesys
    Commented el 23 jul. 2018 a las 17:00
  • Como podría hacer eso con jquery? osea, ese document.addEventListener() como lo haria? algo asi $document.(DOMContentLoaded, function(){...}) Commented el 27 jul. 2018 a las 1:03
  • esa primera linea es equivalente a $(document).ready(function(){ ver es.stackoverflow.com/questions/177710/hacerlo-sin-jquery/… Commented el 27 jul. 2018 a las 1:09

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.