相关疑难解决方法(0)

这是一个示例聊天应用程序 - >

这里的想法是.messages-container尽可能多地占用屏幕.在其中.messages-container,.scroll保存消息列表,如果有更多消息,则屏幕大小滚动.

现在,考虑这种情况:

1. 用户滚动到对话的底部
2. 的.text-input,动态地变大

现在,不是用户保持滚动到对话的底部,文本输入增加,他们不再看到底部.

一种解决方法,如果我们使用react,计算文本输入的高度,如果有任何变化,让.messages-container知道

componentDidUpdate() {
  window.setTimeout(_ => {
    const newHeight = this.calcHeight();
    if (newHeight !== this._oldHeight) {
      this.props.onResize();
    }
    this._oldHeight = newHeight;
  });
}

但是,这会导致可见的性能问题,并且像这样传递消息很难过.

有没有更好的办法？我可以用这种方式使用css来表达当.text-input-increase增加时,我想要基本上shift up所有的.messages-container