JavaScript如何获取页面document相对于浏览器窗口的位置坐标

目前不存在标准Web API可以直接获取页面视口（inner window）相对于浏览器窗口的精确坐标，浏览器出于隐私与安全限制，未对外暴露浏览器自身界面（地址栏、侧边栏、停靠的开发者工具等）的布局信息。

你可以通过现有窗口属性做近似推导，满足绝大多数常规场景的需求，推导逻辑如下：

• 横向偏移近似值：(window.outerWidth - window.innerWidth) - (window.screenLeft - window.screenX)
• 纵向偏移近似值：(window.outerHeight - window.innerHeight) - (window.screenTop - window.screenY)

计算说明 #

• 如果需要排除页面滚动条占据的尺寸影响，可以对结果做二次修正：
  • 减去纵向滚动条宽度：window.innerWidth - document.documentElement.clientWidth
  • 减去横向滚动条高度：window.innerHeight - document.documentElement.clientHeight
• 该方案可以正常识别停靠在浏览器边缘的开发者工具、侧边栏对文档位置的影响
• 仅在部分自定义系统主题、特殊窗口样式的浏览器下会存在少量误差

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