Предотвращение автоматического прокрутки при добавлении чего-то

Question

У меня есть этот код.

<div class="mes-all"> 
<div class="mes" id="1">test1</div> 
</div> 
<button id="add">Send</button> 

И каждый представить некоторые .mes дивы предваряя к .mes-all div.But Я хочу, чтобы не прокручивать авто, я хочу сохранить позицию такой же, как и раньше предваряя дивы выше.
Я искал решение даже на этом сайте, но не смог найти. Я не могу контролировать height() или scrollTop(), я не знаю, что эти функции очень хорошо, поэтому я не могу понять проблему.
У меня есть jsfiddle https://jsfiddle.net/83xq3b3L/

Answer 1

ЯШ:

var $elem = $('#list'); 
var height = $elem.height(); 


$("#add").on("click",function(){ 
var id=parseInt($(".mes:first").attr("id"))+1; 
$(".mes-all").prepend('<div class="mes" id="'+id+'">test'+id+'</div>'); 
height+=30; 
$(".mes-all").animate({scrollTop: height+"px"}); 

}); 

HTML:

<div id = "list" class="mes-all"> 
<div class="mes" id="1">test1</div> 
</div> 
<button id="add">Send</button> 

Answer 2

Одним из подходов является получение scrollHiehgt родительского DIV, а затем scrollTop на эту высоту.

Таким образом, вы код может выглядеть следующим образом:

$("#add").on("click", function() { 
 
    var id = parseInt($(".mes:first").attr("id")) + 1; 
 
    $(".mes-all").prepend('<div class="mes" id="' + id + '">test' + id + '</div>'); 
 
    var divHiehgt = $('.mes-all')[0].scrollHeight; 
 

 
    $('.mes-all').scrollTop(divHiehgt); 
 

 
});

.mes-all { 
 
    overflow: auto; 
 
    height: 300px; 
 
    border: 1px solid; 
 
} 
 
.mes { 
 
    height: 30px; 
 
    padding: 5px; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    padding-top: 15px; 
 
    background: #ebebeb; 
 
} 
 
button { 
 
    width: 100%; 
 
    height: 50px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mes-all"> 
 
    <div class="mes" id="1">test1</div> 
 
</div> 
 
<button id="add">Send</button>

Или jsFiddle: https://jsfiddle.net/j8jaz10k/1/