要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：

• 图片懒加载——当图片滚动到可见时才进行加载
• 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
• 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况
• 在用户看见某个区域时执行任务或播放动画

使用 Intersection Observer API 进行监听

官方代码

let options = {
  root: document.querySelector('#scrollArea'),
  // 指定根 (**root**) 元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，
  //则默认为浏览器视窗。
  rootMargin: '0px',
  // 根 (**root**) 元素的外边距。类似于 CSS 中的 [margin](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin) 属性，比如 "`10px 20px 30px 40px"` (top、right、bottom、left)。如果有指定 root 参数，则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围，使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为四个边距全是 0。
  threshold: 1.0
  // 可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。如果你只是想要探测当 target 元素的在 root 元素中的可见性超过 50% 的时候，你可以指定该属性值为 0.5。如果你想要 target 元素在 root 元素的可见程度每多 25% 就执行一次回调，那么你可以指定一个数组 `[0, 0.25, 0.5, 0.75, 1]`。默认值是 0 (意味着只要有一个 target 像素出现在 root 元素中，回调函数将会被执行)。该值为 1.0 含义是当 target 完全出现在 root 元素中时候 回调才会被执行
}

let observer = new IntersectionObserver(callback, options);

使用部分

const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
          // 回来后的逻辑
      } else {
          // 超出边界后的逻辑
        // observer.unobserve(document.getElementById(id)); 销毁元素的观察
      }
}, { threshold: .2 });
// 获取元素实例
const p = document.getElementById(id)
observer.observe(p)

详细讲解，可以参考mdn developer.mozilla.org/zh-CN/docs/…

使用其他js判断

JS判断div是否在屏幕显示范围内，是否滚出屏幕显示范围 blog.csdn.net/smile_795/a…