1

Hola estoy trabajando en un chat y tengo un div class="Chatbox" que es donde aparecen los mensajes y quiero que al enviar un mensaje si la altura del div es mayor que el alto predeterminado digamos 150px me realize un scrol automaticamente, lo he intentado con animate() pero no me funciona dejo el ejemplo. Estube revisando y al parecer el el height() devuelve una altura menor a la que tiene el div interno.

function scroll(){
  var alto = $('.chatbox').height();
  $('.chatbox').animate({ scrollTop: alto}, 200);
}
$(document).on('click', '.boton', function(){
  var message = '<p>'+$('text').text()+'</p>';
  var alto = $('.chatbox').height();
  $('.chatbox').append(message);
  if(alto > 150){scroll();}
});
.container-chatbox {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow-x: hidden;
}
.chatbox{
  height: calc(100% - 55px);
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid rgba(0, 0, 0, .15);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
 <div class="container-chatbox">
  <div class="chatarea right" >
    <div class="chatbox">
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    </div>
    <div class="textbox">
      <input class="text" type="text" /><button class="boton" />send</button>
    </div>
   </div>
  </div>
</body>

1 respuesta 1

1

El problema es que .chatbox no tiene una referencia para tomar la altura. Cuando especificas dimensiones en porcentaje, el padre debe tener una altura definida y, en este caso, necesitas especificarlo para todos los contenedores, desde body, a menos que algún otro tenga altura definida con medidas fijas.

$(document).on('click', '.boton', function(){
  var message = '<p>'+$('.text').val()+'</p>';
  $('.chatbox').append(message);
  $('.chatbox').animate({ scrollTop: $('.chatbox').prop('scrollHeight') }, 200);
});
/* Altura del documento, sin márgenes */
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.container-chatbox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.chatarea-right {
    height: 100%;
    overflow: hidden;
}
.chatbox{
    height: calc(100% - 55px);
    overflow-y: scroll;
    background: #eee;
    border: 1px solid rgba(0, 0, 0, .35);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
 <div class="container-chatbox">
  <div class="chatarea-right">
    <div class="chatbox">
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba </p>
    <p> Hola haciendo una prueba xxx </p>
    </div>
    <div class="textbox">
      <input class="text" type="text" /><button class="boton" />send</button>
    </div>
   </div>
</body>

Por cierto, cambié class="chatarea right" a class="chatarea-right", agregué la regla en CSS y, finalmente, para obtener el valor de un campo de formulario debes usar .val() y no .text().

3
  • Si pero el scroll sigue sin funcionar que es lo que realmente quiero. Commented el 4 may. 2021 a las 14:53
  • @CarlosAriasMontero, no funcionaba en el fragmento de código porque el elemento tenía menor altura de la especificada, tenías que verlo a pantalla completa. Modifiqué la respuesta para hacer siempre el scroll, sin importar la altura, para que no dependa del tamaño de la ventana.
    – Triby
    Commented el 4 may. 2021 a las 15:01
  • Muy bueno funciona. Commented el 6 may. 2021 a las 13:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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