How to load blocks if necessary (scroll)?

Question

JavaScript

There is an indefinite number of blocks (say 200-500) with information and a background image (each has its own), all the data for these blocks I get from the server all at once (that is, I cannot request a few from the server).
It is necessary to do something so that the pictures and, if possible, the blocks themselves are not loaded all at once, but 6 pieces each. I scrolled to the end of the page - 6 more blocks were loaded and so on. First, load 12, and as 6 scrolls, then another 6 (so that the user does not see the load at all). Please tell me how to do it?
The blocks themselves are formed by a cycle:

<div v-if="residentials.length">
        <Layout v-for="(residential, index) in residentials" :key="index" :img="residential.thumbnail" :name="residential.title"></Layout>
      </div>

Answer 1

Hang the handler of the corresponding event on the scrollable element:
@scroll="onScroll"
In which you check the current scroll position and initiate the display of additional data, if necessary:

methods: {
  onScroll(e) {
    if (e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight) {
      // ...
    }
  },

If you need to "load" not strictly upon reaching the bottom border of the container, but starting from a certain distance to it, then in the inequality above, simply subtract the required number of pixels from the right side ( e.target.scrollHeight - расстояниеДоНижнейГраницы).
https://jsfiddle.net/ht9q5c7g/

Answer 2

window.addEventListener('scroll', preload);

function preload () {
  if (window.scrollY + 100 > window.innerHeight) {
    let data = null; // ???
    vue.residentials.push(data);
  }
}

Answer 3

https://github.com/tangbc/vue-virtual-scroll-list