滚动到div底部?

我正在使用Ajax请求创建聊天，我试图让消息div滚动到底部没有太多运气。

我将所有内容都包装在这个div中:

#scroll {
    height:400px;
    overflow:scroll;
}

是否有一种方法来保持它滚动到底部默认使用JS?

有办法保持它滚动到ajax请求后的底部吗?

当前回答

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();

使用jQuery动画:

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

平滑滚动Javascript:

. getelementbyid(“信息”)。scrollIntoView({behavior: 'smooth'， block: 'end'});

滚动到div内的最后一个元素:

myDiv.scrollTop = myDiv.lastChild.offsetTop

我的场景:我有一个字符串列表，我必须在其中添加用户给定的字符串，并自动滚动到列表的末尾。我已经固定了列表显示的高度，在此之后它应该溢出。

我试过@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

推荐文章