1

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?

inserir a descrição da imagem aqui

$('#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>

1 Resposta 1

3

O problema é que você está colocando position: absolute nos parágrafos. Isso faz com que eles fiquem "soltos" na página e não vão obedecer a regra do overflow. Também não precisa do <br> entre os parágrafos. Só use <br> para quebrar linha entre elementos inline, e os parágrafos são elementos de bloco. Também é desnecessário o margin-bottom: 25px. Os parágrafos já possuem uma margem top e bottom padrão, que você pode ajustar como quiser através da classe .msg.

Então bastaria fazer o append desta forma:

$('.textModal').append('<p class="msg">' + $('#inputToSend').val() + '</p>');

Em relação às margens dos parágrafos, você poderia tirar a margem superior e reduzir a de baixo para 10px, por exemplo:

.msg{
   margin: 0 0 10px 0;
}

Veja um exemplo:

$('#sendMessage').click(function () {
   if($.trim($('#inputToSend').val()) == ''){
      //do not send anything
   } else {
      $('.textModal').append('<p class="msg">' + $('#inputToSend').val() + '</p>');
      $('#inputToSend').val('').focus();
   }
});
.textModal {
    margin: 0px 15px;
    font-size: 16px;
    padding: 10px;
    border: inset;
    height: 100px;
    overflow: auto;
    text-align:justify; 
}

.msg{
   margin: 0 0 10px 0;
}
<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .