我正在使用Ajax请求创建聊天，我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
当前回答
如果你使用jQuery scrollTop，这就简单多了:
$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
其他回答
Java脚本:
getElementById(‘messages)文件。scrollIntoView(虚假);
滚动到当前内容的最后一行。
像你一样，我正在构建一个聊天应用程序，并希望最近的消息滚动到视图中。这最终对我很有效:
//get the div that contains all the messages
let div = document.getElementById('message-container');
//make the last element (a message) to scroll into view, smoothly!
div.lastElementChild.scrollIntoView({ behavior: 'smooth' });
只是作为一个额外的片段。我正在使用angular，并试图在用户选择与用户的不同对话时将消息线程滚动到底部。为了确保在使用ng-repeat for消息将新数据加载到div之后滚动仍然有效，只需在超时时间内包装滚动片段。
$timeout(function(){
var messageThread = document.getElementById('message-thread-div-id');
messageThread.scrollTop = messageThread.scrollHeight;
},0)
这将确保在数据插入DOM之后触发滚动事件。
Css只有:
.scroll-container {
overflow-anchor: none;
}
使滚动条在添加子元素时不会停留在顶部。例如，当聊天底部添加新消息时，滚动聊天到新消息。
如果这样做是为了滚动到聊天窗口的底部，请执行以下操作
在聊天中滚动到特定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();
