如何自动滚动顶部到底部以响应Messenger？ [英] How to auto scroll top to bottom in react for messenger?

问题描述

如何自动上下滚动以响应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

推荐答案

u可以将flex direction设置为column-reverse，它将自动成为您的底部，因此您无需滚动每个新的味精，也可以通过这种方式来反转消息数组

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

这篇关于如何自动滚动顶部到底部以响应Messenger？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！