如何在JavaScript中获取元素基于当前浏览器窗口的坐标？

要得到元素基于浏览器窗口（而非视口）的坐标，最可靠的方法是通过屏幕坐标差值计算，避开依赖outerHeight/innerHeight的不可靠性（这类值会被下载栏这类动态UI干扰）。

实现代码 #

function getElementWindowPosition(element) {
  const rect = element.getBoundingClientRect();
  // 兼容不同浏览器的窗口屏幕坐标属性
  const windowOriginX = window.screenLeft || window.screenX;
  const windowOriginY = window.screenTop || window.screenY;

  // 计算元素相对于浏览器窗口左上角的坐标
  return {
    x: rect.left + window.scrollX - windowOriginX,
    y: rect.top + window.scrollY - windowOriginY
  };
}

// 使用示例
const target = document.getElementById('your-element-id');
const position = getElementWindowPosition(target);
console.log(`窗口内坐标：X=${position.x}, Y=${position.y}`);

原理说明 #

1. getBoundingClientRect()：获取元素相对于视口的坐标，不受页面滚动影响。
2. window.scrollX/window.scrollY：将视口坐标转换为元素相对于文档左上角的坐标。
3. window.screenLeft/screenX：获取浏览器窗口左上角的屏幕X坐标，screenTop/screenY对应屏幕Y坐标。
4. 差值计算：用元素的文档坐标减去窗口的屏幕坐标，得到元素在浏览器窗口内的相对位置——这个结果不受地址栏、下载栏等动态UI的影响。

注意事项 #

• 该坐标的原点是浏览器窗口的最左上角（包括窗口边框），目前没有通用API直接获取边框宽度，不过大部分场景下这个结果已经满足需求。
• 无需考虑devicePixelRatio：该值是设备像素与逻辑像素的比例，我们计算的是逻辑像素层面的坐标，不需要转换。

内容的提问来源于stack exchange，提问作者Thomson