如何计算div元素相对于整个浏览器区域的位置

你需要的相对于浏览器完整可见区域的坐标不需要手动做复杂数学计算，现代浏览器提供了原生API可以直接读取对应值。

实现方式 #

直接调用目标元素的getBoundingClientRect()方法即可，该方法返回的DOMRect对象自带元素相对于视口的位置信息：

• left：元素左上角距离视口左边缘的水平距离，即需要的x坐标
• top：元素左上角距离视口上边缘的垂直距离，即需要的y坐标

示例代码：

// 选中目标div元素，替换成实际的选择器即可
const targetDiv = document.getElementById('your-div-id')
// 获取位置参数
const rect = targetDiv.getBoundingClientRect()

const x = rect.left
const y = rect.top
// 输出格式和示例中的x249、y346一致，取整避免小数误差
console.log(`x${Math.round(x)}、y${Math.round(y)}`)

补充说明 #

• 该方法返回的坐标已经自动适配页面滚动状态，不需要额外叠加滚动偏移量计算
• 返回值包含元素自身的内边距、边框宽度，不包含外边距，如果需要计算外边距范围的位置，可以搭配getComputedStyle()获取margin值做微调
• 只有需要兼容IE8及更早版本的极老旧场景下，才需要手动遍历元素的offsetParent累加offsetLeft/offsetTop，再减去视口滚动偏移量做计算，当前主流环境直接用上述API即可。

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