Javascript 当外部div的大小发生变化时，可滚动div粘贴到底部

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

这里的想法是让

.messages容器

占据尽可能多的屏幕空间。在

.messages container

中，

.scroll

保存消息列表，如果消息多于屏幕大小，则滚动

现在，考虑这个例子：

用户滚动到对话的底部

.text输入

，动态地变大

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

一种解决方法是，如果我们使用react，计算文本输入的高度，如果有任何变化，请通知.messages容器

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

但是，这会导致明显的性能问题，像这样传递消息是令人悲哀的

---

有更好的办法吗？我可以这样使用css来表示当.text输入增加时，我想本质上向上移动所有.messages容器

请尝试以下方法-。尽管fiddle目前正在使用jQuery来增加/调整文本区域的大小，但关键在于用于messages容器和input容器类的flex相关样式-

.messages-container{
  order:1;
  flex:0.9 1 auto;
  overflow-y:auto;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:stretch;
  align-content:stretch;
}

.input-container{
  order:2;
  flex:0.1 0 auto;
}

---

对于.messages容器，flex收缩值设置为1；对于.input容器，flex收缩值设置为0。这可确保邮件容器在重新分配大小时收缩。

请尝试以下方法-。尽管fiddle目前正在使用jQuery来增加/调整文本区域的大小，但关键在于用于messages容器和input容器类的flex相关样式-

.messages-container{
  order:1;
  flex:0.9 1 auto;
  overflow-y:auto;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:stretch;
  align-content:stretch;
}

.input-container{
  order:2;
  flex:0.1 0 auto;
}

---

对于.messages容器，flex收缩值设置为1；对于.input容器，flex收缩值设置为0。这确保了邮件容器在重新分配大小时缩小。

2：此答案的第二次修订版

你的朋友在这里是

flex-direction:column-reverse

在对齐消息容器底部的消息时，您所要求的全部内容都由它来完成，就像Skype和许多其他聊天应用程序所做的那样

.chat-window{
  display:flex;
  flex-direction:column;
  height:100%;
}
.chat-messages{
  flex: 1;
  height:100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

.chat-input { border-top: 1px solid #999; padding: 20px 5px }
.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }

flex方向的下方：柱反向

是IE/Edge/Firefox中的一个bug，其中没有显示滚动条，您可以在此处阅读更多信息：

好处是，您在手机/平板电脑上有约90%的浏览器支持，在桌面电脑上有约65%的浏览器支持，而且随着缺陷得到修复，…还有一个解决办法

// scroll to bottom
function updateScroll(el){
  el.scrollTop = el.scrollHeight;
}
// only shift-up if at bottom
function scrollAtBottom(el){
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

在下面的代码片段中，我添加了上面的两个函数，以使IE/Edge/Firefox以相同的方式运行

flex-direction:column-reverse可以


函数addContent（）{
var msgdiv=document.getElementById（'messages'）；
var msgtxt=document.getElementById（'inputs'）；
var atbottom=scrollAtBottom（msgdiv）；
如果（msgtxt.value.length>0）{
msgdiv.innerHTML+=msgtxt.value+'
'；
msgtxt.value=“”；
}否则{
msgdiv.innerHTML++='Long Long content'+（tempCounter++）+'！
；
}
/*如果位于底部，则为IE/Edge/Firefox*/
if（在底部和（！isWebkit | | isEdge））{
更新滚动（msgdiv）；
}
}
函数resizeInput（）{
var msgdiv=document.getElementById（'messages'）；
var msgtxt=document.getElementById（'inputs'）；
var atbottom=scrollAtBottom（msgdiv）；
如果（msgtxt.style.height='120px'）{
msgtxt.style.height='auto'；
}否则{
msgtxt.style.height='120px'；
}
/*如果位于底部，则为IE/Edge/Firefox*/
if（在底部和（！isWebkit | | isEdge））{
更新滚动（msgdiv）；
}
}
/*修复IE/Edge/Firefox*/
var isWebkit=（'webkiteappearance'在document.documentElement.style中）；
var isEdge=（-ms accelerator在document.documentElement.style中）；
var-tempCounter=6；
函数更新滚动（el）{
el.scrollTop=el.scrollHeight；
}
功能滚动底部（el）{
返回（el.scrollTop+5>=（el.scrollHeight-el.offsetHeight））；
}
html，正文{高度：100%；边距：0；填充：0；}
.聊天窗口{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.聊天信息{
弹性：1；
身高：100%；
溢出：自动；
显示器：flex；
弯曲方向：柱反向；
}
.chat输入{边框顶部：1px实心#999；填充：20px 5px}
.chat输入文本{宽度：60%；最小高度：40px；最大宽度：60%；}
/*临时工。演示按钮*/
按钮{宽度：12%；高度：44px；左边距：5%；垂直对齐：顶部；}
/*开始-修复IE/Edge/Firefox中隐藏的滚动条*/
.聊天信息文本{溢出：自动；}
@媒体屏幕和（-webkit最小设备像素比：0）{
.chat消息文本{溢出：可见；}
/*重置边缘，因为它将自己标识为webkit*/
@支持（-ms accelerator:true）{.chat messages text{overflow:auto；}
}
/*隐藏调整大小FF*/
@-moz文档url-prefix（）{.chat输入文本{resize:none}
/*结束-修复IE/Edge/Firefox*中隐藏的滚动条*/

长内容1

长内容2

长龙内容3

长内容4

长内容5

加味精
调整输入大小
2：本答案的第二次修订

你的朋友在这里是
flex-direction:column-reverse
在对齐消息容器底部的消息时，您所要求的全部内容都由它来完成，就像Skype和许多其他聊天应用程序所做的那样

.chat-window{
  display:flex;
  flex-direction:column;
  height:100%;
}
.chat-messages{
  flex: 1;
  height:100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

.chat-input { border-top: 1px solid #999; padding: 20px 5px }
.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }

flex方向的下方：柱反向
是IE/Edge/Firefox中的一个bug，其中没有显示滚动条，您可以在此处阅读更多信息：

好处是，您在手机/平板电脑上有约90%的浏览器支持，在桌面电脑上有约65%的浏览器支持，而且随着缺陷得到修复，…还有一个解决办法

// scroll to bottom
function updateScroll(el){
  el.scrollTop = el.scrollHeight;
}
// only shift-up if at bottom
function scrollAtBottom(el){
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

在下面的代码片段中，我添加了上面的两个函数，以使IE/Edge/Firefox以相同的方式运行
flex-direction:column-reverse可以


函数addContent（）{
var msgdiv=document.getElementById（'me