vue 聊天框发送消息后滚动条自动到底部

项目场景：

智能问答d框

---

问题描述

发送消息后滚动条没有到底部

---

解决方案：

获取滚动条所在的dom元素,绑定ref

<div class="left-main" ref="left-main">
     <!-- 聊天记录数组 -->
     <div class="left-main-big">
       <!-- 对方消息 -->         
        <!-- 我的消息 -->      
     </div>       
</div>

// 发送
sendMsg() { 
  this.$nextTick(() => {
    this.$refs["left-main"].scrollTop = this.$refs["left-main"].scrollHeight;
  });
},

// css
.left-main { 
   overflow: auto;
 }

scrollTop :元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

scrollHeight :元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

效果：