相关疑难解决方法(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

对于用于研究网站交互的模型网页，我使用 JavaScript 创建了一个模型消息流。此消息流加载到 IFrame 中，并应按预设的时间间隔显示图像，并在将新图像放置在页面底部后滚动到页面底部。使用提供的脚本可以很好地显示图像。然而，Chrome 和 IE 似乎都无法将页面滚动到底部。我想在附加图像后立即滚动到页面底部，但现在添加了 5 毫秒的延迟，因为这有时似乎有效。我的问题是：

• 可以使用 document.body.scrollHeight 来实现此目的吗？
• 我可以让滚动直接发生，还是需要在滚动之前有一个小的间隔？
• 如何让代码在添加图片后直接滚动到IFrame的底部？

使用以下函数并在 Load 时启动 trypost()：

function scrollToBottom(){
  window.scrollBy(0,document.body.scrollHeight);
}

function trypost(){
  point = point + 1;
  if(point < interval.length){
    //create and append a new image
    var newImg = document.createElement("IMG");
    newImg.src = "images/"+images[point]+".png";
    document.getElementById('holder').appendChild(newImg);
    //create and append a return
    var br = document.createElement("br");
    document.getElementById('holder').appendChild(br);
    //time scroll to bottom (after an arbitrary 5 seconds)
    var stb = window.setTimeout(scrollToBottom, 5);
    //time next post
    var nextupdate = interval[point]*400;
    var tp …