Vue 聊天框发送消息滚动条在最底部

需求描述

1. 在开发聊天室功能时，用户发送消息后，聊天框的滚动条会自动在最底部
2. 进入到聊天界面时，滚动条也在最底部

解决方法

1、在聊天框（也就是滚动条）所在 div，加上 ref，即 ref="QAContent"

<div class="scroll" ref="QAContent">
  # 页面内容
  ...
</div>

2、在点击“发送”按钮事件中，写入如下方法

注意：要写在 this.$nextTick() 里面，否则有问题。

scrollToBottom() {
  // this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
  this.$nextTick(() => {
    // dom 元素更新后执行滚动条到底部 否则不生效
    let scrollElem = this.$refs.QAContent;
    console.log('scrollHeight: ', scrollElem.scrollHeight);
    // scrollElem.scrollTop = scrollElem.scrollHeight
    scrollElem.scrollTo({
      top: scrollElem.scrollHeight,
      behavior: 'smooth'
    });
  });
},

3、实现进入到聊天界面，滚动条也在最底部，在生命周期钩子 mounted 里加入上面逻辑

mounted() {
	this.scrollToBottom();
},

scrollTop & scrollHeight 解释

• Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
• scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。
• Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
• 一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。