Question

我有这段代码。

entities

并且每次提交一些<div class="mes-all"> <div class="mes" id="1">test1</div> </div> <button id="add">Send</button> div前面的.mes div。但是我希望它不会自动滚动，我希望它保持与前面的div之前相同的位置。我甚至在这个网站上寻找解决方案，但找不到。我无法控制.mes-all或height()，我不太了解这个功能，这就是我无法弄清楚问题的原因。我有jsfiddle https://jsfiddle.net/83xq3b3L/

Answer 1

JS：

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

一种方法是获取父div的scrollHiehgt，然后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/

在前置内容时防止自动滚动

2 个答案: