我正在使用Ajax请求创建聊天，我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
当前回答
小附录:仅限滚动，如果最后一行已经可见。如果滚动一点点，将内容留在原地(注意:没有测试过不同的字体大小。这可能需要在">= compare "中进行一些调整):
var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);
// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!
// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;
其他回答
可选择的解决方案
function scrollToBottom(element) {
element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
}
Css只有:
.scroll-container {
overflow-anchor: none;
}
使滚动条在添加子元素时不会停留在顶部。例如，当聊天底部添加新消息时，滚动聊天到新消息。
如果你不想依赖scrollHeight，下面的代码可以帮助你:
$('#scroll').scrollTop(1000000);
在我的Angular 6应用中，我这样做了:
postMessage() {
// post functions here
let history = document.getElementById('history')
let interval
interval = setInterval(function() {
history.scrollTop = history.scrollHeight
clearInterval(interval)
}, 1)
}
clearInterval(interval)函数将停止计时器以允许手动上下滚动。
你也可以，使用jQuery，附加一个动画到html，文档的主体通过:
$（“html，body”）.animate（{scrollTop：$（“#div-id”）[0].offsetTop}， 1000）;
这将导致一个平滑的滚动到div顶部，id为“div-id”。
