requestAnimationFrame implements full-screen scrolling comments

Preface

结合具体场景实战requestAnimationFrame

Business scene:

h5 technology: vue2 vant2
Insert image description here
comments can automatically scroll up and you can manually drag the scroll bar to view the above comments

You can think of requestAnimationFrame as a hook function provided inside the browser. The execution time is before the rendering of each frame starts. It will not block the execution of the js main thread, nor will it trigger redundant redraw operations.

Below is a simple demo

code

The code is relatively simple, so I’ll post it directly.

//commentView.vue
<template>
  <section class="contain" ref="myScroll">
    <div class="contain-item" v-for="item in list" :key="item.id">
      <div class="headImg" />
      <div class="comment">{
    
    {
    
     getContent(item) }}</div>
    </div>
  </section>
</template>

<script>
import {
    
     comment } from "@/comment/data.js";

export default {
    
    
  data() {
    
    
    return {
    
    
      list: comment,
      scrollTemp: null,
      dom:null
    };
  },
  methods: {
    
    
    getContent(val) {
    
    
      let obj = JSON.parse(val.content);
      return obj.contentText || "暂无";
    },
    start() {
    
    
        if(this.getScrollBottom()>0){
    
    
           this.dom.scrollTop = this.dom.scrollTop+1
        }  
        window.requestAnimationFrame(this.start)
    },
    getScrollBottom(){
    
    
      //获取滚动条到底部的距离
        let scrollTop = this.dom.scrollTop
       let scrollHeight = this.dom.scrollHeight
      let clientHeight = this.dom.clientHeight
      let scrollBottom = scrollHeight - scrollTop - clientHeight
      return scrollBottom
    }
  },
  computed: {
    
    },
  mounted() {
    
    
    this.dom = this.$refs.myScroll;
    this.start()
  },
};
</script>

<style scope lang="scss">
p {
    
    
  margin: 0;
  padding: 0;
}
.contain {
    
    
  width: 100%;
  height: 300px;
  overflow-y: auto;
  font-size: 14px;
  background: #efefef;
  .contain-item {
    
    
    width: 100%;
    overflow: hidden;
    .headImg {
    
    
      margin-top: 10px;
      float: left;
      left: 0;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background-image: url("@/assets/logo.png");
      background-size: cover;
      margin-left: 30px;
    }
    .comment {
    
    
      float: right;
      text-align: left;
      padding: 4px;
      margin: 10px 30px 10px 0;
      border-radius: 4px;
      right:12px;
      background: #fff;
      line-height: 25px;
      width: 70%;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
      -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
      -webkit-line-clamp: 2; /** 显示的行数 **/
      overflow: hidden; /** 隐藏超出的内容 **/
    }
  }
}
</style>

### 模拟数据  可以直接添

illustrate

1. 在元素渲染到页面后 通过ref 拿到容器的dom
2. 通过getScrollBottom 计算 滚动条距离容器底部的距离
3. 开启 start方法 是一个递归执行 每一帧控制滚动条向下移动一定距离（前提是滚动条没有触到底部） 可以自己控制速度

Insert image description here

Learn more about requestAnimationFrame:
mdn requestAnimationFrame