当外部 Div 调整大小时，如何使用 CSS 使可滚动 Div 粘在底部？

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

许多聊天应用程序会滚动到底部，即使在输入的大小被调整，从而允许用户继续查看最新消息。

使用 React 实现此功能的传统方法是使用componentDidUpdate，每次输入更改时重新计算输入的高度并相应地更新消息容器。

但是，这可能会导致性能问题，并且必须像这样传递消息并不理想。

有更好的方法使用CSS来实现这个吗？

这个的第二次修订答案

flex-direction：列反转；将在消息容器的底部对齐消息，就像 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 中的一个错误，滚动条不显示。

要解决这个问题，我们可以使用以下函数：

// 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;
}

然后将它们添加到我们的代码如下：

/* fix for IE/Edge/Firefox */
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;
}

/* temp. buttons for demo */
button {
  width: 12%;
  height: 44px;
  margin-left: 5%;
  vertical-align: top;
}

/* begin - fix for hidden scrollbar in IE/Edge/Firefox */
.chat-messages-text {
  overflow: auto;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .chat-messages-text {
    overflow: visible;
  }
  /*  reset Edge as it identifies itself as webkit  */
  @supports (-ms-accelerator:true) {
    .chat-messages-text {
      overflow: auto;
    }
  }
}

/* hide resize FF */
@-moz-document url-prefix() {
  .chat-input-text {
    resize: none;
  }
}

/* end - fix for hidden scrollbar in IE/Edge/Firefox */

以上是当外部 Div 调整大小时，如何使用 CSS 使可滚动 Div 粘在底部？的详细内容。更多信息请关注PHP中文网其他相关文章！