當外部 Div 調整大小時，如何使用 CSS 使可滾動 Div 粘在底部？

當外部div 大小改變時，可捲動的div 會黏在底部

許多聊天應用程式會滾動到底部，即使在輸入的大小被調整，從而允許用戶繼續查看最新消息。

使用 React 實現此功能的傳統方法是使用componentDidUpdate，每次輸入更改時重新計算輸入的高度並相應地更新訊息容器。

但是，這可能會導致效能問題，必須像這樣傳遞訊息並不理想。

有更好的方法使用CSS來實現這個嗎？

這個的第二次修訂答案

flex-direction：列反轉；將在訊息容器的底部對齊訊息，就像Skype 和許多其他聊天應用程序一樣。

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

.chat-input-text {
  width: 60%;
  min-height: 40px;
  max-width: 60%;
}

使用 flex-direction 的一個缺點：column-reverse；是 IE/Edge/Firefox 中的一個錯誤，滾動條不顯示。

要解決這個問題，我們可以使用以下函數：

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

然後將它們加到我們的程式碼如下：

/* fix for IE/Edge/Firefox */
var isWebkit = ('WebkitAppearance' in document.documentElement.style);
var isEdge = ('-ms-accelerator' in document.documentElement.style);
var tempCounter = 6;

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

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

/* temp. buttons for demo */
button {
  width: 12%;
  height: 44px;
  margin-left: 5%;
  vertical-align: top;
}

/* begin - fix for hidden scrollbar in IE/Edge/Firefox */
.chat-messages-text {
  overflow: auto;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .chat-messages-text {
    overflow: visible;
  }
  /*  reset Edge as it identifies itself as webkit  */
  @supports (-ms-accelerator:true) {
    .chat-messages-text {
      overflow: auto;
    }
  }
}

/* hide resize FF */
@-moz-document url-prefix() {
  .chat-input-text {
    resize: none;
  }
}

/* end - fix for hidden scrollbar in IE/Edge/Firefox */

以上是當外部 Div 調整大小時，如何使用 CSS 使可滾動 Div 粘在底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！