[英]Create Scrollable Div for Angular Chat
I am creating a chat application in Angular and I am trying to set up the UI for it.我正在 Angular 中创建一个聊天应用程序,我正在尝试为其设置 UI。 I need to create a div that will be housing the chat messages and as more messages fill the div I do not want the div to expand but just stay the same size and show a scroll bar.我需要创建一个 div 来容纳聊天消息,并且随着更多消息填充 div,我不希望 div 扩展,而只是保持相同的大小并显示滚动条。 This div should be 100% the size of the parent div.这个 div 应该是父 div 大小的 100%。 As you click the button to add data the div grows.当您单击按钮添加数据时,div 会增长。 Even if I set a height in px or percent format the div still grows.即使我以 px 或百分比格式设置高度,div 仍然会增长。
The page you link won't load but here are the basics to make a scrollable element:您链接的页面不会加载,但以下是制作可滚动元素的基础知识:
HTML / JS Structure HTML / JS 结构
div
制作一个外容器div
div
(this will be the "scroll wrapper")制作一个内部容器div
(这将是“滚动包装器”)insertAdjacentHtml
or whatever works for your specific situation)将您需要的任何内容插入内部容器(您可以使用诸如insertAdjacentHtml
类的insertAdjacentHtml
或任何适合您特定情况的内容)This order of steps in particular will work well for a scenario where the contents are dynamically changing.这种步骤顺序特别适用于内容动态变化的场景。
CSS CSS
For the outer container对于外容器
width
and set height: auto
为width
设置固定值并设置height: auto
border-radius
if you want circular edges如果您想要圆形边缘,请设置border-radius
overflow: hidden
to keep the scroll wrapper's corners from popping out设置overflow: hidden
以防止滚动包装器的角弹出padding
你可能需要一些padding
For the inner container用于内容器
position: relative
设置position: relative
overflow-y: auto
and overflow-x: hidden
so that you can scroll up and down, but not side to side设置overflow-y: auto
和overflow-x: hidden
这样你就可以上下滚动,但不能左右滚动width: 100%
and set fixed values for max-height
and min-height
.对于所需的溢出行为,您需要设置width: 100%
并为max-height
和min-height
设置固定值。 ( max-height
decides when things will start to overflow ie. make a scroll bar) ( max-height
决定什么时候开始溢出,即制作一个滚动条)
max-height
and min-height
to be less than the outer container's fixed width
+ any padding
, etc. it may have.您将希望max-height
和min-height
小于外部容器的固定width
+ 任何padding
等,它可能具有。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.