Fatal编程技术网
  • javascript/
  • Javascript 如何使溢出内容向下移动到其容器，而不必手动向下滚动？

Javascript 如何使溢出内容向下移动到其容器，而不必手动向下滚动？

javascript html css

Javascript 如何使溢出内容向下移动到其容器，而不必手动向下滚动？,javascript,html,css,Javascript,Html,Css,我正在尝试创建一个聊天应用程序，我希望它在一个新的消息被添加到它的容器中时，我不希望它被隐藏。是的，我已经启用了overflow:auto，但我不希望它出现在用户必须手动向下滚动才能看到发送的最新消息的位置；我希望它能自动向下滚动最新发送的消息。我仍然希望启用滚动条，但我只想禁止它跳起并隐藏最新消息。请阅读有关如何使用.scrollIntoView（）自动向下滚动到元素的文章。第页的JavaScript文件内的 const messages = document.querySelector(&q

我正在尝试创建一个聊天应用程序，我希望它在一个新的消息被添加到它的容器中时，我不希望它被隐藏。是的，我已经启用了overflow:auto，但我不希望它出现在用户必须手动向下滚动才能看到发送的最新消息的位置；我希望它能自动向下滚动最新发送的消息。我仍然希望启用滚动条，但我只想禁止它跳起并隐藏最新消息。

请阅读有关如何使用
.scrollIntoView（）自动向下滚动到元素的文章。
第页的JavaScript文件内的


const messages = document.querySelector(".messages-container"); // Div with class "messages-container"


将收到的消息附加到消息容器div后


messages.scrollTop = messages.scrollHeight;


一些CSS…


.messages-container {
    padding: 30px;
    max-height: 500px;
    overflow-y: scroll;
}



请发布您迄今为止尝试过的代码，以便stackoverflow上的人员可以帮助您解决问题，而不是为您完成所有工作……是否需要JavaScript，或者是否可以仅使用CSS完成？如果我们正在使用React.js，并且我们想用CSS来实现这一点，那么我们需要使用React吗？不确定整个纯CSS的事情。但是，如果您正在使用React，为什么不简单地使用JavaScript呢？您可以通过谷歌搜索如何使用React组件访问DOM，并可能找到自己的方法。这里有一篇文章给你：