原素可视性区域内的判断

序言

在前端工程师中，很多时候必须判断一个原素是不是在可视性区域，例如完成懒加载、曝出统计分析、动态效果等服务。那样，怎样对开展原素可视性区域内的判断呢？本文详细介绍几类常用的，并分析他们优缺点。

方案介绍

应用 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);
}

常见问题

1. 原素可视性区域内的判断必须在翻转事件触发的情况下进行，不然没法不断更新元素情况。
2. 不同类型的判断方式很容易受到一些突发情况产生的影响，比如元素定位方法、元素和老祖先元素下拉列表、元素表明情况等。所以需要在具体使用中进行检测和测试。
3. 当要与此同时监视好几个元素可视性的状态下，能够尝试使用 IntersectionObserver 来提升性能。
4. 当要开展繁杂的可视性地区判断时，能够尝试使用第三方库或架构来优化实际操作，比如 react-intersection-observer、scrollama 等。
5. 在开展元素可视性地区判断时，必须防止频繁的实际操作 DOM 和开启逆流和重绘，以免影响网页页面特性。能通过防抖动或节流阀等方式提升。