I want to implement an infinite scroll inside a div whereby data is fetched when a user scrolls past 70% of the content.

Here is my current code:

element.onscroll = () => {
  let dom = document.getElementById('scrollable');

  let scrollY = dom.scrollHeight - dom.scrollTop;
  let height = dom.offsetHeight;
  let offset = height - scrollY;

  if (offset == 0 || offset == 1) {
   getMoreData()
  }
};

Is there a way I can check whether the scroll is over 70%? Without executing getMoreData() multiple time?

I need to make sure that getMoreData function runs only once when scrolling down.

Implementations in Vue are also welcome.