如何自动从上到下滚动以响应 Messenger？

Question

如何在 Messenger 或其他人的反应中自动从上到下滚动？

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

请提供更好的解决方案

Answer 1

你可以将 flex direction 设置为 column-reverse，它会自动成为你的底部，这样你就不需要在每一个新的消息上滚动，而且通过这种方式你需要反转你的消息数组

如何自动从上到下滚动以响应 Messenger？

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

animation

scroll

messenger

auto

reactjs