如何获取浏览器中网页视口的X、Y坐标位置？

要准确获取视口在浏览器窗口内的X、Y坐标（避开左侧书签栏、右侧开发者工具、底部状态栏等额外UI的干扰），可以通过临时元素定位计算的方式实现，这个方法不依赖浏览器特定API，兼容性覆盖Chrome、Firefox、Edge、Safari等主流浏览器。

实现代码 #

function getViewportWindowOffset() {
    // 创建临时元素，定位在视口左上角
    const tempElement = document.createElement('div');
    Object.assign(tempElement.style, {
        position: 'absolute',
        top: '0',
        left: '0',
        margin: '0',
        padding: '0',
        border: 'none',
        width: '0',
        height: '0',
        pointerEvents: 'none' // 避免干扰页面交互
    });
    document.body.appendChild(tempElement);

    // 获取临时元素的视口定位
    const elementRect = tempElement.getBoundingClientRect();
    // 计算视口左上角相对于屏幕的坐标
    const viewportScreenX = window.screenLeft + elementRect.left + window.scrollX;
    const viewportScreenY = window.screenTop + elementRect.top + window.scrollY;
    // 计算浏览器窗口左上角相对于屏幕的坐标（兼容旧IE）
    const windowScreenX = window.screenX || window.screenLeft;
    const windowScreenY = window.screenY || window.screenTop;

    // 视口相对于浏览器窗口的偏移 = 视口屏幕坐标 - 窗口屏幕坐标
    const offsetX = viewportScreenX - windowScreenX;
    const offsetY = viewportScreenY - windowScreenY;

    // 清理临时元素
    document.body.removeChild(tempElement);

    return { x: offsetX, y: offsetY };
}

// 使用示例
const viewportOffset = getViewportWindowOffset();
console.log(`视口在浏览器窗口中的坐标：X=${viewportOffset.x}, Y=${viewportOffset.y}`);

原理说明 #

1. 临时元素定位：创建一个绝对定位在视口左上角的透明元素，确保它的位置完全对齐视口原点。
2. 坐标转换：通过getBoundingClientRect()获取元素相对于视口的位置，结合window.scrollX/Y（滚动偏移）和window.screenLeft/Top（窗口屏幕坐标），计算出视口左上角的屏幕坐标。
3. 偏移计算：用视口的屏幕坐标减去浏览器窗口的屏幕坐标，得到视口相对于窗口的偏移量，这个值就是你需要的X、Y坐标。

为什么不直接用outerWidth - innerWidth？ #

这个差值只能得到浏览器左右侧UI的总宽度，无法区分左侧（如书签栏）和右侧（如开发者工具）各自的宽度，因此无法单独计算出视口的X偏移。而上述方法可以精准定位视口在窗口内的位置，不受任意方向额外UI的影响。

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