当外部div的大小发生变化时，可滚动的div会停留在底部

当外部div的大小发生变化时，可滚动的div会停留在底部

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-direction: column-reverse;

是IE / Edge /
Firefox中的错误，滚动条未显示

好处 是，您在移动设备/平板电脑上拥有〜90％的浏览器支持，而在台式机上拥有〜65％的浏览器支持，并且随着该漏洞的修复，……还有一种解决方法。

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

在下面的代码片段中，我从上面添加了2个功能，以使IE / Edge/Firefox具有相同的行为

flex-direction: column-reverse;

。

function addContent () {  var msgdiv = document.getElementById('messages');  var msgtxt = document.getElementById('inputs');  var atbottom = scrollAtBottom(msgdiv);  if (msgtxt.value.length > 0) {    msgdiv.innerHTML += msgtxt.value + '<br/>';    msgtxt.value = "";  } else {    msgdiv.innerHTML += 'Long long content ' + (tempCounter++) + '!<br/>';  }    if (atbottom && (!isWebkit || isEdge)) {    updateScroll(msgdiv);  }}function resizeInput () {  var msgdiv = document.getElementById('messages');  var msgtxt = document.getElementById('inputs');  var atbottom = scrollAtBottom(msgdiv);  if (msgtxt.style.height == '120px') {    msgtxt.style.height = 'auto';  } else {    msgtxt.style.height = '120px';  }    if (atbottom && (!isWebkit || isEdge)) {    updateScroll(msgdiv);  }}var isWebkit = ('WebkitAppearance' in document.documentElement.style);var isEdge = ('-ms-accelerator' in document.documentElement.style);var tempCounter = 6;function updateScroll(el){  el.scrollTop = el.scrollHeight;}function scrollAtBottom(el){  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));}html, body { height:100%; margin:0; padding:0; }.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%; }button { width: 12%; height: 44px; margin-left: 5%; vertical-align: top; }.chat-messages-text{ overflow: auto; }@media screen and (-webkit-min-device-pixel-ratio:0) {  .chat-messages-text{ overflow: visible; }    @supports (-ms-accelerator:true) { .chat-messages-text{ overflow: auto; } }}@-moz-document url-prefix() { .chat-input-text { resize: none } }<div >  <div >    <div  id="messages">      Long long content 1!<br/>      Long long content 2!<br/>      Long long content 3!<br/>      Long long content 4!<br/>      Long long content 5!<br/>    </div>  </div>  <div >    <textarea  placeholder="Type your message here..." id="inputs"></textarea>    <button onclick="addContent();">Add msg</button>    <button onclick="resizeInput();">Resize input</button>  </div></div>

---

旁注1：该检测方法尚未完全测试，但应在较新的浏览器上运行。

旁注2：为聊天输入附加一个调整大小事件处理程序可能比调用updateScroll函数更有效。

注意：感谢 HaZardouS 重用其html结构