我正在使用Ajax请求创建聊天，我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
当前回答
Javascript或jquery:
var scroll = document.getElementById('messages');
scroll.scrollTop = scroll.scrollHeight;
scroll.animate({scrollTop: scroll.scrollHeight});
Css:
.messages
{
height: 100%;
overflow: auto;
}
其他回答
更新的方法，适用于所有当前浏览器:
this.scrollIntoView(false);
小附录:仅限滚动，如果最后一行已经可见。如果滚动一点点，将内容留在原地(注意:没有测试过不同的字体大小。这可能需要在">= 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;
使用:
var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);
或检查滚动到底部:
var element = $(element);
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.on('scroll', function() {
if ( element.scrollTop() >= maxScrollTop ) {
alert('scroll to bottom');
}
});
使用jQuery动画:
$('#DebugContainer').stop().animate({
scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);
如果这样做是为了滚动到聊天窗口的底部，请执行以下操作
在聊天中滚动到特定div的想法如下
1)每个聊天div由Person, time和message组成，在一个带有类chatContentbox的for循环中运行
2) querySelectorAll查找所有这样的数组。可以是400个节点(400个聊天)
3)最后一个
4) scrollIntoView ()
let lastChatBox = document.querySelectorAll('.chatContentBox');
lastChatBox = lastChatBox[lastChatBox.length-1];
lastChatBox.scrollIntoView();
