Javascript 使div自动滚动到底部（react）

我目前正在为学校开发一个聊天应用程序，但我想让它像大多数聊天应用程序一样自动滚动到底部。到目前为止，我已经尝试了我能找到的每一个解决方案，但我只得到了一些错误。我是个新手，所以可能会有一些我没有意识到自己在犯的错误。这是我的

class Messages extends React.Component {
    updateScroll() {
    let element = document.querySelector(".messages");
    element.scrollTop = element.scrollHeight;
}
render() {
    const messages = store.getState().messages.map((msg) => {
      this.updateScroll();
      return (
        <Message
          name={msg.displayName}
          message={msg.text}
          time={msg.timestamp}
          pic={msg.pic}
          key={msg.timestamp}
          clas={msg.who}
        />
      );
    });
    return (
      <div className="messages">
        <div className="chat">
        </div>
        <div className="sendMessage">
          <input
            type="text"
            placeholder="Message epic channel"
            className="pendingMessage"
            onKeyPress={this.handleKeyDown}
          />
          <button onClick={this.handleMessageSend}>Send</button>
        </div>
      </div>
    );
  }
}
export default Messages;

类消息扩展了React.Component{
updateScroll（）{
let元素=document.querySelector（“.messages”）；
element.scrollTop=element.scrollHeight；
}
render（）{
const messages=store.getState（）.messages.map（（msg）=>{
this.updateScroll（）；
返回(
);
});
返回(
发送
);
}
}
导出默认消息；

这里是我的GitHub链接，如果你想要完整的代码

---

谢谢

我建议你用css来做这件事

聊天室内容需要以下标记，其中内容与底部对齐

.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

---

您应该使用引用而不是文档查询

类消息扩展了React.Component{
构造函数（）{
超级（）
this.messagesRef=React.createRef（）
}
updateScroll（）{
this.messagesRef.current.scrollTo（0，this.messagesRef.current.scrollHeight）
}
render（）{
const messages=store.getState（）.messages.map（（msg）=>{
this.updateScroll（）；
返回(
);
});
返回(
发送
);
}
}
导出默认消息；

---

您可以尝试使用ref+scrollTo吗？

在消息下面创建一个虚拟div

<div ref={messagesEndRef}></div>

如果msglist是新消息的列表，请使用useffect处理更改

    useEffect(() => {
        messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
    }, [msglist])

---

如果您只是从state获取消息，请尝试调用

componentDidMount

中的

updateScroll

函数

---

您还可以使用对

消息

div的引用，并从中获取高度，而不是使用

查询选择器

，这样不会将最新消息置于顶部吗？这可以解决看不见的问题，但这不是我想要的。呃，不是真的，你试过吗？嗯，我有点不明白为什么会这样，但这是一个非常简单的解决方法哈哈。谢谢你的帮助，没问题！谢谢你的推荐