JSFiddle - React, Tailwind, and code Playground

HTML

<div id="articleContainer">
  <ul class="article-list" v-for="(article, index) in articleList">
    <li>我是文章{{index}}</li>
  </ul>
  <div class="infinite-scroll-signal"></div>
</div>

CSS

#articleContainer {
  min-height: 400px;
}

.infinite-scroll-signal {
  width: 0;
  height: 0;
  visibility: hidden;
}

JavaScript

const vm = new Vue({
  el: '#articleContainer',
  data: {
    articleList: new Array(20).fill(0)
  },
  mounted () {
    const infinteScrollSignal = document.querySelector('.infinite-scroll-signal')
    infinteScroll(infinteScrollSignal)
  }
})

function infinteScroll (element) {
  document.addEventListener('scroll', () => {
    const rect = element.getBoundingClientRect()
    const {
      top,
      left,
      bottom,
      right
    } = rect
    const isTotalVisible = (
      top >= 0
      &&
      left >= 0
      &&
      bottom < document.documentElement.clientHeight
      &&
      right < document.documentElement.clientWidth
    )
    if (isTotalVisible) {
    	vm.articleList = vm.articleList.concat(new Array(20).fill(20))
      console.log(vm)
    }
  }, false)
}