JavaScript判断元素是否进入视口

场景：
场景转自MDN

方案1：getBoundingRect()和onScroll

2016年之前使用getBoundingRect()和onScroll组合实时来获取元素相对左上角的距离来判断元素是否进入视口区域
缺点：触发频率高，无用计算太多，性能不好。如果和其他需要占用主线程的程序并行，比如动画，可能会有问题

实现：

// 1.getBoundingRect获取元素是否进入视口
// (1) 监听的元素：1、需要有高度 2、overflow:auto or scroll;
function fromGetBoundingRect(element) {
   
  const CSS = element.getBoundingClientRect();
  wrap.addEventListener("scroll", (e) => {
   
	  const innerH = window.innerHeight;
	  const innerW = window.innerWidth;
	  const {
    top, height } = element.getBoundingClientRect();
	  if (top > 0 && top < innerH) inView = true;
	  if (Math.abs(top) <= height) inView = true;
	  if (CSS.height + top <= 0) inView = false;
	  console.log(inView ? "进入" : "离开");
  });
}
fromGetBoundingRect(d2);