js判断元素是否在可视区域内

以下是几种不同的方法来判断一个元素是否在可视区域内：

方法一：使用getBoundingClientRect()方法

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

方法二：使用window.scrollY和window.innerHeight属性

function isInViewport(element) {
  const elementTop = element.offsetTop;
  const elementBottom = elementTop + element.offsetHeight;
  const scrollTop = window.scrollY;
  const scrollBottom = scrollTop + window.innerHeight;
  const isVisible = (elementTop >= scrollTop) && (elementBottom <= scrollBottom);
  return isVisible;
}

方法三：使用Element.getBoundingClientRect()方法和window.pageYOffset属性

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  const isVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
  const scrollTop = window.pageYOffset;
  const scrollBottom = scrollTop + window.innerHeight;
  const isPositionVisible = (rect.top >= scrollTop) && (rect.bottom <= scrollBottom);
  return isVisible && isPositionVisible;
}

这些方法都可以判断一个元素是否在可视区域内，它们的实现方式略有不同，但都能达到相同的效果。