How to auto scroll top to bottom in react for messenger?

问题

How to auto scroll top to bottom in react for messenger or others?

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>
      )
    }
}

Please provide me better solutions

回答1:

u can set flex direction to column-reverse and it will automatically be your bottom so you dont need to scroll on every new msg,also with this way you need to reverse your array of messages

来源：https://stackoverflow.com/questions/59857004/how-to-auto-scroll-top-to-bottom-in-react-for-messenger