vue 实现聊天室出现新消息时，滚动条自动滚动到底

在基于socket-io实现简易多人聊天室时，涉及到了如何在点击某个对话框以及发送消息后，将页面的滚动条滚动到最下方，我试了两种方法都可以实现，但是前提都是必须保证是在setTimeout和this.$nextTick的回调中执行的，否则不会生效；这是因为下面使用的两种方法都必须在页面完全加载后调用才能生效的。

方法一：

使用document的原生方法或者是$refs方法去获取当前容器的scrollHeight，并且赋值给当前容器的scrollTop，在发送消息和点击某个对话框时，调用该方法即可；

缺点：无法实现滑动条丝滑的过渡，有点生硬；

代码：

方法二：

使用crollIntoView()方法，该方法可以调用它的元素滚动到浏览器窗口的可见区域；

该方法的参数可以接收一个布尔值，也可以接收一个对象；

当入参为true时，表示元素的顶部将对齐到可滚动祖先的可见区域的顶部；

当入参为false时，表示元素的底部将与可滚动祖先的可见区域的底部对齐；

当入参为一个对象时，有三个可选的属性：

behavior：定义过渡动画，"auto","instant"或"smooth"。默认为"auto"；

block：定义垂直方向的对齐，"start"，"center"，"end"或"nearest"。默认为"center"；

inline：定义水平方向的对齐，"start"，"center"，"end"或"nearest"。默认为"nearest"；

按理来说，正常使用是可以生效的，但是我在实践的过程中发现，以下代码的使用是没有生效的；

代码：

lists：为当前的父容器元素

原因：暂时并未找到

后面，我换了另外一种方式去实现了想要的效果，就是获取到当前对话框的所有信息，然后把最后一条信息的垂直方向的对齐设置为start，也算是实现了滚动条的触底；

代码：

grouplists为当前对话框所有消息元素的数组集合。

有说的不好或者不对的地方，欢迎大家指正！