為 Angular Chat 創建可滾動的 Div

Question

我正在 Angular 中創建一個聊天應用程序，我正在嘗試為其設置 UI。 我需要創建一個 div 來容納聊天消息，並且隨着更多消息填充 div，我不希望 div 擴展，而只是保持相同的大小並顯示滾動條。 這個 div 應該是父 div 大小的 100%。 當您單擊按鈕添加數據時，div 會增長。 即使我以 px 或百分比格式設置高度，div 仍然會增長。

Answer 1

您鏈接的頁面不會加載，但以下是制作可滾動元素的基礎知識：

HTML / JS 結構

1. 制作一個外容器div
2. 制作一個內部容器div （這將是“滾動包裝器”）
3. 將內部容器附加到外部容器
4. 將您需要的任何內容插入內部容器（您可以使用諸如insertAdjacentHtml類的insertAdjacentHtml或任何適合您特定情況的內容）

這種步驟順序特別適用於內容動態變化的場景。

CSS

1. 對於外容器

   • 為width設置固定值並設置height: auto
   • 如果您想要圓形邊緣，請設置border-radius
   • 設置overflow: hidden以防止滾動包裝器的角彈出
   • 你可能需要一些padding

2. 用於內容器

   • 設置position: relative
   • 設置overflow-y: auto和overflow-x: hidden這樣你就可以上下滾動，但不能左右滾動
   • 對於所需的溢出行為，您需要設置width: 100%並為max-height和min-height設置固定值。 （ max-height決定什么時候開始溢出，即制作一個滾動條）
     • 您將希望max-height和min-height小於外部容器的固定width + 任何padding等，它可能具有。