reactjs - 如何自动从上到下滚动以响应信使？

Question

如何自动从上到下滚动以响应信使或其他人？

class MessageBox extends Component {

  componentDidMount() {
    this.scrollToBottom();
  }

  componentDidUpdate() {
    this.scrollToBottom();
  }


  scrollToBottom = () => {
      this.messagesEnd.scrollIntoView({ behavior: "smooth" });
  }

  render() {
      return (
        <div className="yourClass">
            <div className="chat-textarea-box">
                <MessageBox />
            </div>
            <div ref={(el) => { this.messagesEnd = el; }}></div>
        </div>
      )
    }
}

请给我更好的解决方案

标签： reactjsanimationscrollautomessenger

Answer 1

您可以将 flex 方向设置为 column-reverse，它将自动成为您的底部，因此您无需滚动每个新的 msg，同样通过这种方式您需要反转您的消息数组