关于vue设置div滚动条一直处于最下方的解决方案

最近一个项目设计到了类似于一个在线客服聊天室需求。

使用的vue做的，需要将滚动条一直处于最下方，也就是一直展示最新的消息。

开始使用的原生js操作DOM 使scrollTop=scrollHeight 发现没有效果。

后来发现scrolltop 一直比scrollHeight 少一条消息的高度。

 

说一下我聊天框实现的思路

聊天框遍历一个对象数组的内容  数组里也就是消息对象

每当websocket传过来一条新的消息我就把这个消息push到这个数组里面

vue就会动态遍历这个数组 构建DOM元素

 

初步判定 当我们往数组里push一条数据的时候 DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新

我们获取的还是没有push前的DOM元素 所以一直差一条消息的高度

 

后来采取了这种方式

   _this.$nextTick(()=>{
         _this.$refs.chatmain.scrollTop= _this.$refs.chatmain.scrollHeight
    })

这里介绍一下 $nextTick 的作用

DOM更新后的一个回调函数 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

也就是说我们在push后使用这个函数 他会等待DOM刷新后再去执行里面的代码 这样我们里面就会获取到最新的DOM 就不会差一个消息的高度

 

记得点赞关注哦！！！