我正在使用Ajax请求创建聊天，我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
当前回答
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' });
以下是我在我的网站上使用的:
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
为什么不使用简单的CSS来做到这一点呢?
诀窍是使用display: flex;和弯曲方向:列反向;
Here is a working example. https://codepen.io/jimbol/pen/YVJzBg
你也可以，使用jQuery，附加一个动画到html，文档的主体通过:
$（“html，body”）.animate（{scrollTop：$（“#div-id”）[0].offsetTop}， 1000）;
这将导致一个平滑的滚动到div顶部，id为“div-id”。
使用:
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');
}
});
