JavaScript使用Intersection Observer检测浏览器移出屏幕时的div可见性

Intersection Observer API 本身无法覆盖「浏览器窗口整体拖出系统屏幕后再拖回」的检测场景，这是由API的设计逻辑决定的：它的观测基准是浏览器自身的视口（viewport），只判断元素和浏览器视口的交叉状态，不会感知浏览器窗口在系统层面的位置、是否被其他系统窗口遮挡。

你不需要完全放弃Intersection Observer，可以组合API和自定义逻辑实现需求，性能比纯几何计算更优：

• 基础的元素相对于浏览器视口的可见性检测，继续用Intersection Observer实现，避免自己绑定scroll事件频繁计算带来的性能损耗
• 补充系统层面的可见性检测逻辑，覆盖窗口移出屏幕的场景：
  1. 可以搭配Page Visibility API的document.hidden属性先判断页面的基础可见状态
  2. 通过window.screenX、window.screenY、window.outerWidth、window.outerHeight属性获取浏览器窗口在系统屏幕上的坐标和尺寸，再和系统屏幕的宽高（window.screen.width/window.screen.height）做交集计算，即可判断浏览器窗口是否在用户可见的系统屏幕范围内
  3. 监听window的move、focus、blur事件，在窗口位置、状态变化时主动触发一次可见性校验即可

// 初始化Intersection Observer检测元素和浏览器视口的交叉状态
const targetEl = document.querySelector('#target-div');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const isInBrowserViewport = entry.isIntersecting;
    if (!isInBrowserViewport) {
      console.log('元素在浏览器视口外，不可见');
      return;
    }
    // 元素在视口内时，额外判断浏览器是否在系统屏幕可见区域
    const isBrowserInScreen = checkBrowserInScreen();
    console.log(isBrowserInScreen ? '元素真实可见' : '浏览器在屏幕外，元素实际不可见');
  })
}, { threshold: 0 });
observer.observe(targetEl);

// 自定义检测浏览器窗口是否在系统屏幕可见区域
function checkBrowserInScreen() {
  const screenW = window.screen.width;
  const screenH = window.screen.height;
  const winX = window.screenX;
  const winY = window.screenY;
  const winW = window.outerWidth;
  const winH = window.outerHeight;

  // 判断浏览器窗口和系统屏幕区域是否存在交集
  return !(
    winX + winW < 0 ||
    winY + winH < 0 ||
    winX > screenW ||
    winY > screenH
  );
}

// 监听窗口移动事件，主动触发观测更新
window.addEventListener('move', () => {
  observer.takeRecords();
});

注意：部分浏览器在全屏模式、多屏幕场景下对screenX等系统属性的返回值存在差异，需要根据你的兼容范围做适配。

内容的提问来源于stack exchange，提问作者Cansın Memiş