vue3聊天定位到最下面

vue3聊天定位到最下面

在vue中做聊天功能时,消息模块通常是固定高度后设置overflow:auto;但当消息过多后,会产生滚动条,这时将消息默认定位到底部可以利用scrollIntoView()方法。关键代码如下；

nextTick(() => {
          chatRoom.value.lastElementChild.scrollIntoView()
        })

scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
nextTick()是将回调函数延迟在下一次dom更新数据后调用。
(附)在与后端交互过程中,聊天的数据不断增多，那么我们需将该方法写在watch监听中

import {  watch, } from 'vue';
// props.demoData为聊天数据数组
watch(() => props.demoData, () => {
        nextTick(() => {
          chatRoom.value.lastElementChild.scrollIntoView()
        })
    }, {
      deep: true//深度监听
    })