在添加内容前阻止自动滚动
在添加内容前阻止自动滚动
提问于 2016-02-22 04:31:41
我有这个代码。
<div class="mes-all">
<div class="mes" id="1">test1</div>
</div>
<button id="add">Send</button>在每次提交一些.mes div前缀到.mes-all div.But时，我希望它不会自动滚动，我希望它保持与前置div之前相同的位置。
我甚至在这个网站上都在寻找解决方案，但是没有找到。我不能控制height()或scrollTop()，我不太了解它的功能，这就是为什么我找不出问题的原因。
我有jsfiddle https://jsfiddle.net/83xq3b3L/。
回答 2
Stack Overflow用户
发布于 2016-02-22 06:04:02
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>Stack Overflow用户
发布于 2016-02-22 06:29:14
一种方法是获取父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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35541644
复制相关文章
相似问题
腾讯云开发者
