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>