前言

在前端开发中，有时候我们需要判断一个元素是否在可视区域内，比如实现懒加载、曝光统计、动画效果等功能。那么，如何对进行元素可视区域的判定呢？本文将介绍几种常用的方法，并分析它们的优缺点。

方案介绍

使用 getBoundingClientRect

getBoundingClientRect 是一个 DOM API，它返回一个对象，包含了元素的左、右、上、下、宽、高等属性，这些属性都是相对于视口的。根据该对象返回值可以通过以下条件判断元素是否在可视范围内：

当 DOMRect.top 小于视口高度且 DOmRect.bottom 大于0
当 DOMRect.left 小于视口宽度且 DOmRect.right 大于0

这种方法的优点是简单易用，不需要考虑滚动条的影响，也不需要获取元素的尺寸和位置。缺点是兼容性不太好，IE8 及以下不支持该 API。

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top < window.innerHeight &&
    rect.bottom > 0 &&
    rect.left < window.innerWidth &&
    rect.right > 0
  );
}

使用 scrollTop 与 offsetTop

scrollTop 是一个属性，表示元素滚动条向下滚动的距离。offsetTop 是一个属性，表示元素相对于其最近的定位父元素的顶部偏移量。通过这两个属性，我们可以计算出元素相对于文档的顶部偏移量，然后再与视口高度和滚动条位置进行比较，判断元素是否在可视区域内：

当元素距文档顶部距离 - 滚动条位置 < 视口高度且元素距文档顶部距离 - 滚动条位置 + 元素高度 > 0
当元素距文档左侧距离 - 滚动条位置 < 视口宽度且元素距文档左侧距离 - 滚动条位置 + 元素宽度 > 0

这种方法的优点是兼容性好，可以支持 IE8 及以上浏览器。缺点是需要考虑滚动条的影响，也需要获取元素的尺寸和位置，比较繁琐。

function isInViewport(element) {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const offsetTop = element.offsetTop;
  const windowHeight = window.innerHeight;
  const elementHeight = element.offsetHeight;

  return (
    offsetTop - scrollTop < windowHeight &&
    offsetTop - scrollTop + elementHeight > 0
  );
}

使用 IntersectionObserver

IntersectionObserver 是一个新的 API，它可以用来监听元素与其祖先元素或视口的交叉情况。它接受一个回调函数和一个配置对象作为参数，回调函数会在每次元素交叉状态发生变化时被调用，配置对象可以指定观察的根元素、根边界和阈值。通过这个 API，我们可以轻松地判断元素是否在可视区域内：

创建一个 IntersectionObserver 实例，并传入一个回调函数和一个配置对象
在回调函数中，根据 entries 参数获取每个被观察元素的交叉信息
判断每个被观察元素的 isIntersecting 属性是否为 true，如果是，则表示元素在可视区域内

function isInViewport(element) {
  const observer = new IntersectionObserver(
    ([entry]) => {
      return entry.isIntersecting;
    },
    {
      root: null,
      rootMargin: '0px',
      threshold: 0,
    }
  );

  observer.observe(element);
}

注意事项

元素可视区域的判定需要在滚动事件触发时进行，否则无法及时更新元素的状态。
不同的判定方法可能会受到一些特殊情况的影响，例如元素的定位方式、元素与祖先元素的滚动条、元素的显示状态等。因此需要在实际使用时进行测试和验证。
当需要同时监听多个元素的可视状态时，可以考虑使用 IntersectionObserver 来提高性能。
当需要进行复杂的可视区域判定时，可以考虑使用第三方库或框架来简化操作，例如 react-intersection-observer、scrollama 等。
在进行元素的可视区域判定时，需要避免频繁地操作 DOM 和触发回流和重绘，否则会影响页面性能。可以通过防抖或节流等方式进行优化。

聊一聊如何对元素可视区域进行判定

前言

方案介绍

使用 getBoundingClientRect

使用 scrollTop 与 offsetTop

使用 IntersectionObserver

注意事项