<body>
    <div id="box1" class="hoge" style="margin: 100px; height: 500px; width: 300px; background-color: aqua;"><p class="content"></p></div>
    <div id="box2" class="hoge" style="margin: 100px; height: 500px; width: 300px; background-color: aqua;"><p class="content"></p></div>
    <div id="box3" class="hoge" style="margin: 100px; height: 500px; width: 300px; background-color: aqua;"><p class="content"></p></div>
    <div id="box4" class="hoge" style="margin: 100px; height: 500px; width: 300px; background-color: aqua;"><p class="content"></p></div>
<script>
const scroll = 0.8;
const options = {
    root: document,
    rootMargin: '-100% 0px 1000% 0px',
    threshold: 1 - scroll,
}

const observer = new IntersectionObserver(targets => {
  targets.forEach(target => {
      if (!target.isIntersecting) {
        console.log('here is 80%');
      } else {
          console.log('out of viewport');
      }
  });
}, options);

observer.observe(document.body)
</script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.