Como posso fazer com que a minha div, cujo texto é adicionado através de um append
do jQuery, faça scroll quando o texto chega aos 100px
, e todo o texto adicionado depois fique escondido, e seja necessário fazer scroll para ver o resto?
$('#sendMessage').click(function() {
if ($.trim($('#inputToSend').val()) == '') {
//do not send anything
} else {
$('.textModal').append('<p class="msg" style="margin-bottom: 25px; position: absolute;">' + $('#inputToSend').val() + '</p>' + '<br>');
$('#inputToSend').val('').focus();
}
});
.textModal {
margin: 0px 15px;
font-size: 16px;
padding: 10px;
border: inset;
height: 100px;
overflow: auto;
text-align: justify;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messageInput">
<div class="textModal"></div>
<input id="inputToSend" type="text" class="text form-control" placeholder="Insert Message...">
<button id="sendMessage" class="btn btn-primary">Enviar</button>
</div>