vue中实现滚动条一直保持在底部

今天项目中需要实现一个聊天模块，需要聊天框一直保持在元素的底部，下面记录下实现的方法：

<template>
   <div id="chat"></div>
</template>
<script>
   export default{
     mounted(){
      // 页面首次展示时滚动条定位底部
      this.scrollToBottom()
     },
     updated(){
      // 在接收到新消息的时候触发方法将滚动条定位到底部
      this.scrollToBottom()
     },
     methods:{
       // 定义将滚动条定位在底部的方法
       scrollToBottom(){
        this.$nextTick(()=>{
         let chat = this.$el.querySelector("#chat")
         chat.scrollTop = chat.scrollHeight
        })
       }
     },
   }
</script>
<style>
#chat{
  height: 200px;
  overflow-y:auto;
}
</style>

👇觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者