记录监听元素重叠度

页面代码

 <div id="parent" style="height: 500px;overflow:scroll;border: 1px solid #000">
       <div v-for="item in numbers" :key="item">{{item}}</div>
      <div id="loading">
        <i class="el-icon-loading"></i>
      </div>
    </div>

JS

export default {
  name: 'page1',
  data () {
    return {
      numbers: Array.from({ length: 100 }, (_, i) => i + 1)
    }
  },
  methods: {
    // 新增数据
    addCol () {
      const a = Array.from({ length: 100 }, (_, i) => i + 101)
      this.numbers = this.numbers.concat(a)
    },
    init () {
      const that = this
      const loadingDom = document.getElementById('loading')
      const parentDom = document.getElementById('parent')
      const ob = new IntersectionObserver(function (entries) {
        const ent = entries[0]
        if (!ent.isIntersecting) {

        } else {
          console.log('加载更多', ent)
          that.addCol()
        }
      }, {
        root: parentDom,
        threshold: 0.5
      })
      ob.observe(loadingDom)
    }

  },
  mounted () {
    this.init()
  }
}