首頁 > web前端 > css教學 > 當外部 Div 大小調整時,如何使可滾動 Div 保持在底部?

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

Barbara Streisand
發布: 2024-12-07 20:36:16
原創
413 人瀏覽過

How Can I Keep a Scrollable Div Stuck to the Bottom When Its Outer Div Resizes?

當外部 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板