當外部 Div 大小調整時，如何使可滾動 Div 保持在底部？

當外部 Div 調整大小時，可滾動 Div 粘在底部

本文解決了有關流暢調整大小的外部 div 內的滾動行為的問題。目標是保持內部 div .messages-container 底部附近的滾動位置，儘管外部 div 的高度發生任何變化。

當 .text-input 欄位動態擴充時會出現問題，導致使用者會看不到對話中的底部訊息。

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

首選解決方案利用.messages-container div 的CSS 的flex-direction: column-div 的CSS 的flex-direction: column-div 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中文網其他相關文章！