vue实现聊天栏定位到最底部（超简单、可直接复制使用）

原理

通过watch监听聊天内容的加载，一旦加载完成或者数据更新触发vue的数据监听时，就重新修改【滚动滑钮到滚动条顶部的距离=滚动条的高度】，从而实现定位到底部的效果。

实现

1、布局

新建一个div（聊天框，如下），给他一个id，一会要用到

 然后记得给这个div的y轴一个滚动条，如下：

.dlog_content{
  overflow-y: auto;
  overflow-x: hidden;
}

 2、JavaScript代码（核心）

这里的messnowList是我的消息储存集合，用于判断数据变化，这个可以根据你实际情况修改，通过id绑定刚才的聊天框div，然后修改实现定位底部

<script>

export default {
  data () {
   
  },
  watch: {
    // 监听当前消息列表，更新时，保持滚动条位于底部
    messnowList: function scrollToBottom () {
      this.$nextTick(() => {
        var message = document.getElementById('content_overflow')
        // 滚动滑钮到滚动条顶部的距离=滚动条的高度
        message.scrollTop = message.scrollHeight
      })
    }
  }
}

</script>