功能场景

在开发中，我们总能遇到某些场景需要运用到聊天框，比如客服对话。如果你不是一名开发人员，可能你在使用QQ或者聊天工具的时候并没有注意到，当你发出一条消息的时候，窗体会默认滚动到最底部，让用户可以看到最新的聊天消息。

实现原理

通过每一次的数据变化，只要数据变化，将滚动的最大高度赋值给滚动条的最大高度。
scrollHeight:滚动条高度
scrollTop: 距离最顶部高度

实现过程

在vue中

核心内容

this.$nextTick(() => {
  let msg = document.getElementById('gundong') // 获取对象
  msg.scrollTop = msg.scrollHeight // 滚动高度
})

了解一下$nextTick

$nextTick的执行条件是在DOM发生变化并且结束之后执行的一次回调。
vue在响应数据变化的时候并非在数据变化时DOM马上变化，而是按照一定的生命周期进行进程进行变化的。
如果你用watch，你会发现，永远只能监听到最近的一条聊天记录之上。似乎监听不到数据变化。其实并不是，在watch是直接监听data数据的变化情况，快于DOM，所以先行执行watch了。
那如果加上$nextTick的话，就能够等到DOM变化完成之后再进行执行，有点类似timeout。

了解一下“scrollTop”and“scrollHeight”

scrollTop是滚动条的当前高度。默认是0
scrollHeight是滚动条的整体高度
只要动态修改滚动条到顶部的距离等于div的高度，那么久实现滚动条定位在底部了。