为 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等，它可能具有。