<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title></title>
        
    </head>
    <body>
        <div id="info"></div>
        <div id="content"></div>
        <div id="target"></div>      
    </body>
</html>
 #content {
  width: 100vw;
  height: 100vh;
}

#info{
  position: fixed;
  top: 0;
}

#target {
  width: 100px;
  height: 200vh;
  background: red;
}
const options = {
  threshold:[0, 0.5,0.7,1] 
}
let observer = new IntersectionObserver(function(entries){
    entries.forEach( function(element, index) {
        info.textContent = '缓慢滚动，到达或者超过临界值：' + element.intersectionRatio;
    });

}, options)
observer.observe(document.querySelectorAll('#target')[0])

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.