直播/聊天中评论/消息自动滚动功能的实现

最近在做一个直播的页面，其中有一个功能是实现评论实时滚动，具体效果如下图

大致思路

• 获取DOM,Vue中建议使用ref
• 元素的scrollTop =元素的.scrollHeight;

Element.scrollTop补充

Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。

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

Element.scrollHeight补充

Element.scrollHeight 只读属性，是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

scrollHeight的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。 没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

更详细的介绍可以参考MDN上面的介绍
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

具体代码

html

 <div class="tabs danmuBox" ref="scrolldIV">
          <div v-for="item in danmuList" :key="item.id" class="item">
            <div class="left">
              A
            </div>
            <div class="right">
              <div class="author">
                {{ item.author }}
              </div>
              <div class="text" >{{ item.text }}</div>

            </div>
          </div>
      </div>

js

let div = this.$refs.scrolldIV
this.$nextTick(() => {
  div.$el.scrollTop = div.$el.scrollHeight;
})

data

 danmuList: [
        {
          id: 1,
          text: "AAAAAA",
          author: "wb_zhhh",
          color:'f5f5f5'
        },
        {
          id: 2,
          text: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaa",
          author: "wb_zhhhAAAAAAAAAAAAAAAAAAAAAAAAa",
          color:'999999'
        },
        {
          id: 3,
          text: "AAAAAA",
          author: "wb_zhhh",
          color:'666666'
        },
      ],

使用案例

333.gif

代码地址

https://github.com/menglin1997/hls-video

大家好,我是[张小翼],欢迎关注我的公众号(前端zml)，一起学习交流

前端zml.png