當輸入欄位大小調整時，如何將可捲動的聊天 Div 保持在底部？

當外部Div 更改大小時，可滾動Div 粘在底部

概述

在聊天應用程式中，通常有一個可滾動訊息容器，該容器佔用大部分螢幕。但是，當輸入欄位的高度動態增加時，使用者的滾動位置可能會受到干擾。

問題

當輸入欄位成長時，它會有效地增加外部 div 的高度，這會導致將訊息容器向下推。這會導致用戶看不到最近的訊息。

基於 React 的解決方案

一種方法是使用 React 的 componentDidUpdate 生命週期方法來計算輸入字段的高度，並在其發生變化時通知訊息容器。但是，這可能會導致效能問題和過多的消息傳遞。

使用Flexbox 的CSS 解決方案

更有效的解決方案涉及使用CSS Flexbox：

• 彎曲方向：列反向；將訊息放置在容器的底部。
• 這可以確保即使輸入欄位增大，訊息仍保留在檢視中。

注意事項

• IE/Edge/Firefox 錯誤： 這些瀏覽器有一個錯誤，即使用flex-direction 時滾動條可能會消失： column-reverse;.
• 解決方法：要解決此問題，請新增以下函數：

• 檢查容器是否位於底部並在這些瀏覽器中調整輸入欄位大小時調整捲軸。

以上是當輸入欄位大小調整時，如何將可捲動的聊天 Div 保持在底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！