当外部 Div 大小调整时，如何使可滚动 Div 保持在底部？

当外部 Div 调整大小时，可滚动 Div 粘在底部

本文解决了有关流畅调整大小的外部 div 内的滚动行为的问题。目标是保持内部 div .messages-container 底部附近的滚动位置，尽管外部 div 的高度发生任何变化。

当 .text-input 字段动态扩展时会出现问题，导致用户会看不到对话中的底部消息。

使用 CSS 的解决方案（flex-direction： column-reverse)

首选解决方案利用 .messages-container div 的 CSS 的 flex-direction: column-reverse 属性。这种方法在容器底部对齐消息，模仿流行聊天应用程序中观察到的行为。此外，即使没有消息，它也确保滚动条保持可见。

.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

注意事项和浏览器兼容性

但是，这种方法可能会在 IE 中遇到错误/Edge/Firefox，滚动条变得不可见。

解决方法IE/Edge/Firefox

为了解决这个问题，我们可以采用一种模仿 flex-direction:column-reverse 行为的解决方法。

// 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 相同的滚动行为。

// ...

if (atbottom && (!isWebkit || isEdge)) {
  updateScroll(msgdiv);
}

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