当输入字段大小调整时，如何将可滚动的聊天 Div 保持在底部？

当外部 Div 更改大小时，可滚动 Div 粘在底部

概述

在聊天应用程序中，通常有一个可滚动消息容器，该容器占用大部分屏幕。但是，当输入字段的高度动态增加时，用户的滚动位置可能会受到干扰。

问题

当输入字段增长时，它会有效地增加外部 div 的高度，这会导致将消息容器向下推。这会导致用户看不到最近的消息。

基于 React 的解决方案

一种方法是使用 React 的 componentDidUpdate 生命周期方法来计算输入字段的高度，并在其发生变化时通知消息容器。但是，这可能会导致性能问题和过多的消息传递。

使用 Flexbox 的 CSS 解决方案

更有效的解决方案涉及使用 CSS Flexbox：

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

• 弯曲方向：列反向；将消息放置在容器的底部。
• 这可以确保即使输入字段增大，消息仍保留在视图中。

注意事项

• IE/Edge/Firefox 错误： 这些浏览器存在一个错误，即使用 flex-direction 时滚动条可能会消失： column-reverse;.
• 解决方法：要解决此问题，请添加以下函数：

function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

• 检查容器是否位于底部并在这些浏览器中调整输入字段大小时调整滚动条。

以上是当输入字段大小调整时，如何将可滚动的聊天 Div 保持在底部？的详细内容。更多信息请关注PHP中文网其他相关文章！