javascript如何判断一个元素是否在可视区域中

// 传递给IntersectionObserver()构造函数的配置对象，控制观察者的回调函数的被调用时环境
const options = {
  // 指定根元素，用于检查目标元素可见性。必需是目标元素的祖先元素。如果未指定或为null，默认为浏览器视窗（viewport）
  root: document.querySelector("#container"),
  // 根元素外边距，用于确定root与target发生交集时计算交集的区域范围，使用该属性可控制root元素每一条边的收缩或扩张。如果指定了root，rootMargin也可以使用百分比来取值。
  rootMargin: "0px",
  // 触发的交叉比阈值，可以是单一的数字也可以是数字的数组，表示当target与root相交程度达到该值时回调会被执行。
  // 若要探测target在root中可见性超过50%时触发回调，则指定该属性为0.5；
  // 若要探测target在root中可见程度每多25%就触发一次回调，则指定该属性为[0, 0.25, 0.5, 0.75, 1]；
  // 默认值为0，表示target有一个像素出现在root中，就会触发回调执行；
  // 设置为1，表示target完全出现在root中的时候回调才会执行；
  threshold: 1.0,
};

// 回调函数
const callback = (entries, observer) => {
  entries.forEach((entry) => {
    // 每个entry都表示一个被观察的target元素的相交变化
    // entry.boundingClientRect target元素的位置、大小信息
    // entry.intersectionRatio target元素与root元素交叉比，实际计算的是entry.intersectionRect 面积 / boundingClinetRect 面积，元素非矩形时，也按矩形计算
    // entry.intersectionRect 相交区域的位置、大小信息
    // entry.isIntersecting target元素是否与root元素相交
    // entry.rootBounds root元素的位置、大小信息
    // entry.target target元素本身
    // entry.time 从observer的时间原点到交叉触发的时间的时间戳
  });
};

// 新建一个相交观察实例
const observer = new IntersectionObserver(callback, options);

// 监听target
observer.observe(document.querySelector("#element"));

/**
 * 通过元素及其可滚动的父元素，判断当前元素是否在父元素可视区域内（仅判断了垂直滚动）
 * @param elementNode 当前元素
 * @param containerNode 带滚动条的包裹父元素
 */
function isElementViewableInContainer(
  elementNode: HTMLDivElement,
  containerNode: HTMLDivElement,
) {
  // 子元素相对父元素顶部的距离
  const elementTop = elementNode.offsetTop;
  // 子元素底部相对父元素顶部的距离，使用offsetHeight将边框以内都算入子元素高度
  const elementBottom = elementNode.offsetTop + elementNode.offsetHeight;
  // 父元素滚动距离
  const containerTop = containerNode.scrollTop;
  // 父元素当前可视底部距离，使用clientHeight，不包含父元素滚动条及边框高度
  const containerBottom = containerNode.scrollTop + container.clientHeight;
  // 若子元素顶在父元素滚动后顶部之下 且 子元素底部在父元素滚动后底部之上，则判定为在滚动父元素的可视区域内
  if (elementTop >= containerTop && elementBottom <= containerBottom)
    return true;
  // 否则在可视区域外
  else return false;
}

/**
 * 通过元素及其可滚动的父元素，判断当前元素是否在父元素可视区域内（仅判断了垂直滚动）
 * @param elementNode 当前元素
 * @param containerNode 带滚动条的包裹父元素
 */
function isElementViewableInContainer(
  elementNode: HTMLDivElement,
  containerNode: HTMLDivElement,
) {
  // 子元素rect
  const elementRect = elementNode.getBoundingClientRect();
  // 子元素顶部相对视窗口顶部的距离
  const elementTop = elementRect.top;
  // 子元素底部相对视窗口顶部的距离
  const elementBottom = elementRect.bottom;
  // 父元素rect
  const containerRect = containerNode.getBoundingClientRect();
  // 父元素顶部相对视窗口顶部的距离
  const containerTop = containerRect.top;
  // 父元素底部相对视窗口顶部的距离
  const containerBottom = containerRect.bottom;
  // 若子元素顶在父元素滚动后顶部之下 且 子元素底部在父元素滚动后底部之上，则判定为在滚动父元素的可视区域内
  if (elementTop >= containerTop && elementBottom <= containerBottom)
    return true;
  // 否则在可视区域外
  else return false;
}

// 根元素
const root = document.getElementById("container");
// 目标元素
const target = document.getElementById("element");
// observer配置
const options = {
  root: root,
  rootMargin: "0px",
  threshold: 1,
};
// 是否可见
let isViewable = false;
// 回调函数
const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.target.id === root.id) {
      // 完全可见时相交比率为1
      isViewable = entry.intersectionRatio === 1;
    }
  });
};
// 新建观察者
const observer = new IntersectionObserver(callback, options);
// 监听目标元素
observer.observe(element);