js如何判断元素是否可见 检测元素可见性的3种有效方法

function isVisible(el) {
  return el.offsetWidth > 0 && el.offsetHeight > 0;
}

// 示例
const myElement = document.getElementById('myElement');
if (isVisible(myElement)) {
  console.log('元素可见');
} else {
  console.log('元素不可见');
}

function isVisible(el) {
  return el.getClientRects().length > 0;
}

// 示例
const myElement = document.getElementById('myElement');
if (isVisible(myElement)) {
  console.log('元素可见');
} else {
  console.log('元素不可见');
}

function isVisible(el) {
  if (!el) return false;

  // 检查 display: none
  if (getComputedStyle(el).display === 'none') return false;

  // 检查 visibility: hidden 或 collapse
  if (getComputedStyle(el).visibility === 'hidden' || getComputedStyle(el).visibility === 'collapse') return false;

  // 检查 opacity: 0
  if (getComputedStyle(el).opacity === '0') return false;

  // 检查 offsetWidth 和 offsetHeight
  if (el.offsetWidth <= 0 || el.offsetHeight <= 0) return false;

  // 检查 getClientRects
  if (el.getClientRects().length === 0) return false;

  // 递归检查祖先元素
  let parent = el.parentNode;
  while (parent) {
    if (getComputedStyle(parent).overflow === 'hidden' && !isElementInViewport(el)) return false; // 检查是否被父元素裁剪
    parent = parent.parentNode;
  }

  return true;
}

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

// 示例
const myElement = document.getElementById('myElement');
if (isVisible(myElement)) {
  console.log('元素可见');
} else {
  console.log('元素不可见');
}

function isElementInScrollableContainer(el, container) {
  const elRect = el.getBoundingClientRect();
  const containerRect = container.getBoundingClientRect();

  return (
    elRect.top >= containerRect.top &&
    elRect.left >= containerRect.left &&
    elRect.bottom <= containerRect.bottom &&
    elRect.right <= containerRect.right
  );
}

// 示例
const myElement = document.getElementById('myElement');
const scrollableContainer = document.getElementById('scrollableContainer');

if (isElementInScrollableContainer(myElement, scrollableContainer)) {
  console.log('元素在滚动容器内可见');
} else {
  console.log('元素在滚动容器内不可见');
}

let lastScrollTop = 0;
window.addEventListener('scroll', function() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop !== lastScrollTop) {
    requestAnimationFrame(function() {
      // 在这里执行可见性判断
      const myElement = document.getElementById('myElement');
      if (isVisible(myElement)) {
        console.log('元素可见');
      } else {
        console.log('元素不可见');
      }
      lastScrollTop = scrollTop;
    });
  }
});