面试题：如何判断网页元素是否到达可视区域？

这是一个非常实用的前端面试题，常用于实现懒加载、无限滚动、埋点曝光等场景。判断元素是否进入可视区域有多种方法，从简单到高级逐步演进。

---

✅ 方法一：使用 getBoundingClientRect()（兼容性好）

这是最常用且兼容性最好的方法。

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

🔍 解释：

• getBoundingClientRect() 返回元素相对于视口的位置（top, left, bottom, right）。
• 判断元素是否完全在视口内：所有边都在视口范围内。

✅ 优点：

• 兼容性好（IE6+）
• 简单直观

❌ 缺点：

• 需要手动监听 scroll、resize 事件
• 频繁调用可能影响性能（建议节流）

window.addEventListener('scroll', throttle(() => {
  if (isInViewport(myElement)) {
    console.log('元素已进入可视区域');
  }
}, 100));

---

✅ 方法二：使用 Intersection Observer API（推荐！现代方案）

这是现代浏览器推荐的方式，性能更好，无需监听页面滚动。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素进入可视区域');
      // 可以在这里加载图片、触发埋点等
      observer.unobserve(entry.target); // 可选：只观察一次
    }
  });
});

// 开始观察某个元素
observer.observe(document.getElementById('myElement'));

🔍 高级用法：设置阈值（部分可见时触发）

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        console.log('元素至少 20% 可见');
      }
    });
  },
  {
    threshold: 0.2, // 20% 可见时触发
    rootMargin: '0px 0px -50px 0px' // 可视区域向下延伸 50px
  }
);

✅ 优点：

• 高性能：由浏览器优化，不阻塞主线程
• 无需手动节流
• 支持部分可见、自定义根元素（root）、外边距等
• 适合懒加载、无限滚动

❌ 缺点：

• 不支持 IE（需 polyfill）

---

✅ 方法三：计算 offsetTop 与 scrollTop（传统方法）

适用于简单场景，但不够精确。

function isInViewport(element) {
  const scrollTop = window.pageYOffset;
  const clientHeight = window.innerHeight;
  const offsetTop = element.offsetTop;
  const height = element.offsetHeight;

  return (
    offsetTop < scrollTop + clientHeight && // 元素顶部在视口下方
    offsetTop + height > scrollTop          // 元素底部在视口上方
  );
}

这种方法需要考虑父元素的 position 和滚动，容易出错，不推荐在复杂布局中使用。

---

✅ 实际应用示例：图片懒加载

<img data-src="real-image.jpg" class="lazy" alt="图片">

// 使用 Intersection Observer
const lazyImages = document.querySelectorAll('.lazy');
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      imageObserver.unobserve(img);
    }
  });
});

lazyImages.forEach(img => imageObserver.observe(img));

---

✅ 总结（面试回答模板）

判断元素是否进入可视区域主要有两种方式：

1. getBoundingClientRect()：兼容性好，通过计算元素与视口的边界关系判断，但需手动监听滚动并节流。
2. Intersection Observer API：现代推荐方案，性能优异，无需手动处理滚动，支持阈值和外边距配置，适合懒加载、曝光统计等场景。

在实际项目中，优先使用 Intersection Observer，对于不支持的浏览器可降级使用 getBoundingClientRect + 节流。

⚠️ 注意：避免在 scroll 事件中频繁调用 getBoundingClientRect，应使用节流或防抖优化性能。