滚动到div底部?

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

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

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

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

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

当前回答

以下是我在我的网站上使用的:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

其他回答

如果你不想依赖scrollHeight，下面的代码可以帮助你:

$('#scroll').scrollTop(1000000);

Javascript或jquery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

Css:

 .messages
 {
      height: 100%;
      overflow: auto;
  }

您可以使用Element.scrollTo()方法。

它可以使用内置的浏览器/操作系统动画，所以它非常流畅。

你可以像这样使用HTML DOM scrollIntoView方法:

var element = document.getElementById("scroll");
element.scrollIntoView();

如果这样做是为了滚动到聊天窗口的底部，请执行以下操作

在聊天中滚动到特定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();

推荐文章