如何将可滚动 Div 固定在可调整大小的外部 Div 的底部？

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

在聊天应用程序中，通常在另一个包含以下内容的 div 中有一个可滚动 div对话历史记录。当外部 div 大小发生变化时，例如底部的输入字段增大或缩小时，可滚动 div 应保持其在对话底部的位置。

使用 CSS 的解决方案

使用flex-direction：column-reverse；属性位于外部 div 上，您无需任何 JavaScript 即可实现此行为。这个属性本质上翻转了子元素的顺序，将可滚动的div放在底部。

.outer-div {
  display: flex;
  flex-direction: column-reverse;
}

.scrollable-div {
  flex: 1;
  overflow: auto;
}

但是，这个解决方案有一个缺点：它可能会导致滚动条消失某些浏览器，如 Firefox、IE 和 Edge。

隐藏滚动条的解决方案

修复对于隐藏滚动条问题，您可以添加以下 CSS：

/* Reset webkit, including edge */
.scrollable-div-text {
  overflow: visible;
}

@supports (-ms-accelerator: true) {
  .scrollable-div-text {
    overflow: auto;
  }
}

这有效地在第一个可滚动 div 内创建第二个可滚动 div，确保滚动条保持可见。

实现细节

// Check if at bottom of scrollable div
function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

// Update scroll position if at the bottom
function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

// Function to resize input and adjust scroll position if needed
function resizeInput() {
  const scrollableDiv = document.getElementById('scrollable-div');
  const input = document.getElementById('input');
  
  // Toggle input height
  input.style.height = input.style.height === '40px' ? '120px' : '40px';

  // Check if scrolled to the bottom and update scroll position if needed
  if (scrollAtBottom(scrollableDiv)) {
    updateScroll(scrollableDiv);
  }
}

在上面的脚本中，resizeInput()函数检查滚动条是否位于可滚动div的底部并调整滚动位置如果需要的话。

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