vue中消息列表保持在最底部

把滚动条定位在底部，首先尝试了动态获取当前滚动条并修改滚动条到顶部的距离的方式：

var container= document.getElementById('#你想要选中的内容id')
container.scrollTop = container.scrollHeight // 把滚动条顶部加上滚动条高度

但是滚动条并没有滚动（一脸懵逼），控制台打印可以获取到值，但并没有执行修改操作，估计是动态加载数据时，数据还未加载，滚动条就已经执行。

利watch监控数据的改变，然后动态修改滚动条到顶部的距离。
但是滚动条还是没有滚动（一脸懵逼）。

watch: {
  '要监视的数据': 'scrollToBottom'
}
 
scrollToBottom: function () {
var container= document.getElementById('#你想要选中的内容id')
container.scrollTop = container.scrollHeight // 把滚动条顶部加上滚动条高度
}

最后尝试用scrollIntoView()函数通过添加一个元素实现，但刚开始一直有问题，因为把元素加在了动态列表的后面，在动态列表的加载函数后面加了把这个元素scrollIntoView()事件，导致滚动列表下面一直有一块空白块，使用样式也无法隐藏。关键问题是使用v-scroll的位置，不要放在包裹整个内容的标签上，而是用在需要一直定位在最底部的元素上。直接在动态列表底部最后一个元素上使用，每次插入元素时触发滚动函数，把它滚动到视野范围内。

<div class="Containt_box">
    <div v-for="(item,index) in messageList" :key="index">
        <i>{{item.Time}}</i>
        <p class="clearfix me" v-scroll>  //使用位置
            <img src="../../static/images/avatar/me.jpg">
            <span>{{item.Message}}</span>
        </p>
    </div>
</div>
directives: {
   scroll: {
     inserted(el) {
       el.scrollIntoView()
    }
  }
}

参考文章