web聊天室样式问题

尝试做一个聊天室  它的聊天窗口和QQ类似：

1.新消息在下 旧消息在上 内容溢出时由滚动条处理

2.每当有新消息时 自动移至最下方

对于第一点 我尝试了 flex-end+overflow:auto但是不起效 查找资料后得知flex-end向上溢出 这是不会引起overflow的

解决方法是 设置overflow:auto 设置max-height:80% 设置position:absolute;bottom:20%;

即仍然 自动处理溢出 将消息窗口底部与下方发送窗口顶部对齐 并且设置其最大高度 保证滚动条出现在消息窗口而非视窗

对于第二点 采用MutationObserver监听消息窗口messagebox的子树childList 每当有新的子元素插入时 设置messagebox.value.scrollTop = messagebox.value.scrollHeight

在onMounted中设置监听 确保DOM已经被绑定至变量上

也可以采用更vue的方式 定义const scrolltop=ref() 在聊天窗口绑定 :scrollTop="scrolltop"

并监听消息数组 每当有新元素插入时 改变scrolltop的值为scrollHeight

值得注意的时 watch/computed仅能作用于ref等特定对象 原生dom的属性是监听不了的

上述方法对于文字消息可以使用 但对于图片等延迟加载的元素 这会导致这种情况

 图片内容还未加载 滚动条位置变动就已经结束 导致图片加载完成后无法按要求展示

尝试 Mutation监听attributes 但是这种监听方法对于文字消息也不能正确修改滚动条位置

这是因为scrollHeight是只读属性 是浏览器计算得出的 与其他属性不同

也尝试将watch后面的方法放在nextTick里面 但是都没有作用

解决方法

1.为图片设置onload事件 加载完毕之后再改一次scrollTop

2.监听时设置subtree:true,这样的话img标签内部内容的填充也会触发事件

试错

1.ResizeObserver可以监听元素大小变化 但是由于设置了max-height 所以在这个场景下无法使用

(要用也可以 得把输入空间改成fixed 然而这又涉及到定位问题)

2.某些情况 定位(bottom)和滚动条不兼容 估计还是向上溢出的问题