vue聊天信息实现滚动

一、起因

vue实现的聊天demo要有信息滚动的功能。

二、知识储备

clientHeight、offsetHeight、scrollHeight、scrollTop

简单介绍：

网页可见区域高：document.body.clientHeight

网页可见区域高（包括边线的高）：document.body.offsetHeight

网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop

详细介绍：

（1）clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，为只读元素。

简单说就是盒子的原始高度

 

（2）offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，为只读元素。

简单说就是盒子的原始高度+padding+border+滚动条

 

 （3）scrollHeight： 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。简单说它就是盒子里面包含的内容的真实高度。

 

 （4）scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。

MDN解释：一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

 

所以思想就是使用 卷起的高度（scrollTop） = 总的内容高度（scrollHeight） - 聊天区域盒子大小 (offsetHeight);

注：卷起的高度就是我们看不见的那部分，即被隐藏的部分

（1）起始内容，画图如下：（下面画图offsetHeight被我写成了clientHeight了，实际上两者在盒子div没有boder与padding时是一样大的）

 

 （2）使用算法：卷起的高度（scrollTop） = 总的内容高度（scrollHeight） - 聊天区域盒子大小 (offsetHeight);画图如下：

 

 

三、实现

代码一句就可以实现滚动：

vue使用ref获取元素：

this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight-this.$refs.chatContent.offsetHeight

原生h5使用document获取：

let chatContent = document.getElementById('chatContent');
chatContent.scrollTop = chatContent.scrollHeight - chatContent.offsetHeight

注：

（1）上面的offsetHeight在div盒子没有padding和border时也可以改为clientHeight，因为当盒子元素没有boder与padding时，两者值相等。

（2）由于插入新的消息属于创建新的元素的过程，这个过程是属于异步的，所以为了防止异步创建元素导致获取高度不准确，我们可以等待一段时间，等元素创建完毕之后再获取元素高度

例如：

  setTimeout(() => {
              this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight-this.$refs.chatContent.offsetHeight 
            }, 200);

四、实现的效果