<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>无限加载</title>
    <meta
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
      name="viewport"
    />
  </head>

  <body>
    <div id="info">不可见，请非常慢的向下滚动</div>
    <div id="target"></div>

  </body>

</html>
 #info {
    position: fixed;
  }

  #target {
    position: absolute;
    top: 200%;
    width: 100px;
    height: 100px;
    background: red;
  }
let observer = new IntersectionObserver(([entry]) => {
  if (entry.intersectionRatio > 0) {
    // 快速滚动会执行到这里
    info.textContent = "可见了"
  } else {
    // 慢速滚动会执行到这里
    info.textContent = "不可见，请非常慢的向下滚动"
  }
})

observer.observe(target)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.