Scroll to load data

Renderings:

  After comprehensive use, I feel that the following method of binding div to monitor the scroll bar is still easy to use. Some can monitor the scroll wheel scrolling, but they cannot monitor the mouse dragging the scroll bar. The following method can monitor both↓

<template>
  <div class="scrollTest-container" id="scrollTestContainer">
    <div class="item" v-for="(item) in commentsList" :key="item.IDcard">{
   
   {item.name}}</div>
  </div>
</template>

<script>
import { getUserList } from "../api/index";
import "../mock/index";
export default {
  name: "ScrollTest",
  data() {
    return {
      pageSize: 12,
      pageNum: 0,
      commentsList: []
    };
  },
  mounted() {
    const that = this;
    let dom = document.getElementById("scrollTestContainer");
    dom.addEventListener("scroll", function() {
      const clientHeight = dom.clientHeight;
      const scrollTop = dom.scrollTop;
      const scrollHeight = dom.scrollHeight;
      //条件成立
      if (clientHeight + scrollTop == scrollHeight) {
        that.pageNum++;
        //获取数据
        that.getList();
      }
    });
    this.getList();
  },
  methods: {
    getList() {
      getUserList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(data => {
        if (data.code == 200 && data.data) {
          if (Array.isArray(data.data)) {
            let result = data.data;
            result.forEach(item => {
              this.commentsList.push(item);
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.scrollTest-container {
  width: 1000px;
  height: 400px;
  background-color: aquamarine;
  overflow-y: auto;
}
.item {
  width: 100%;
  height: 10%;
  border-bottom: 2px solid skyblue;
  box-sizing: border-box;
}
</style>