如果您注意到，似乎在使用 prepend() 时，附加元素堆积在顶部，但容器 div 向下扩展。
与 FB 的加载先前消息相比，您会注意到元素加载在彼此之上，但您的 View 没有改变。它类似于 append() 除了容器 div“似乎”向上延伸。
我尝试这样做以模拟 div 向上延伸但失败了
var scrolldif = $('#response')[0].scrollHeight-$('#response').scrollTop();
$('#response').scrollTop(scrolldif);
这是要尝试的示例 html。只需在浏览器中复制/粘贴/运行即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.chatbox div{
height: 100%;
}
#response{
height: 300px;
overflow-y: scroll;
overflow-wrap: break-word;
}
</style>
<script type="text/javascript">
function appendMessage()
{
var data = 'test';
var message = document.createElement('p');
message.innerHTML = data;
$('#response').append(message);
}
function prependMessage()
{
var data = 'test'+Math.floor((Math.random() * 10) + 1);
var message = document.createElement('p');
message.innerHTML = data;
console.log(message.innerHTML);
$('#response').prepend(message);
}
</script>
<body>
<div class="container">
<div class="chatbox">
<div class="col-sm-8 rightP">
<div class="row contents">
<a onclick="return appendMessage()" class="load btn btn-default">Append</a>
<a onclick="return prependMessage()" class="load2 btn btn-default">Prepend</a>
<div class="row msg">
<div id="response" class="msg form-group">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
谢谢!
最佳答案
我终于找到了答案，但如果有更好的解决方案，请分享!看来我之前的试验确实有效，但 scrolldif 的位置是引用容器 div 的顶部，所以我反向从底部引用它，如下所示:
$('#response').scrollTop($('#response')[0].scrollHeight-scrolldif);
在我上面的代码中，只需执行以下操作:
function prependMessage()
{
//this scrollHeight is the total height of div including hidden parts of the
//div caused by overflow BEFORE elements were prepended to it.
var scrolldif = $('#response')[0].scrollHeight-$('#response').scrollTop();
for(var $i = 0;$i<10;$i++)
{
//prepend elements....
}
//this scrollHeight is the total height of div including hidden parts of the
//div caused by overflow AFTER elements were prepended to it.
$('#response').scrollTop($('#response')[0].scrollHeight-scrolldif);
}
虽然 'div' 没有延伸到顶部，但它似乎只是通过调整容器 div 的 scrollTop 值来延伸。如果有更好的解决方案，请分享!
关于javascript - JS/jQuery : When prepending a dynamic element, 如何强制容器div 向上延伸而不是向下延伸？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24178692/