我正在使用Ajax请求创建聊天,我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
我正在使用Ajax请求创建聊天,我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
当前回答
你也可以,使用jQuery,附加一个动画到html,文档的主体通过:
$(“html,body”).animate({scrollTop:$(“#div-id”)[0].offsetTop}, 1000);
这将导致一个平滑的滚动到div顶部,id为“div-id”。
其他回答
如果你使用jQuery scrollTop,这就简单多了:
$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
我的场景:我有一个字符串列表,我必须在其中添加用户给定的字符串,并自动滚动到列表的末尾。我已经固定了列表显示的高度,在此之后它应该溢出。
我试过@Jeremy Ruten的答案,它工作,但它滚动到(n-1)个元素。如果有人面临这种类型的问题,可以使用setTimeOut()方法解决。你需要修改代码如下:
setTimeout(() => {
var objDiv = document.getElementById('div_id');
objDiv.scrollTop = objDiv.scrollHeight
}, 0)
下面是我创建的StcakBlitz链接,其中显示了问题及其解决方案:https://stackblitz.com/edit/angular-ivy-x9esw8
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));
来自jQuery 1.6的工作
https://api.jquery.com/scrollTop/
http://api.jquery.com/prop/
可选择的解决方案
function scrollToBottom(element) {
element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
}
如果你不想依赖scrollHeight,下面的代码可以帮助你:
$('#scroll').scrollTop(1000000);