如何正确获取 DOM 元素的位置偏移量？ [复制]

Posted 2023-03-31

【中文标题】如何正确获取 DOM 元素的位置偏移量？ [复制]

【英文标题】：How to get the location offset of a DOM element properly? [duplicate]

【发布时间】：2016-09-12 06:13:20

【问题描述】：

我正在尝试使用 element.getBoundingClientRect() 来计算元素的偏移量，但是这样做的问题是，如果网页在高度方面很长并且涉及滚动，则该函数会返回元素的偏移量 wrt窗户。如何获取页面顶部的偏移量？

【问题讨论】：

提示：您可以将滚动的距离作为另一个值来获取您想要的值。

对不起，这对我没有用处。

我想你会发现它正是你所需要的......

马蒂是对的，看看这个answer

@Marty 解决了这个问题。谢谢

【参考方案1】：

documentation for getBoundingClientRect() 在一个简短的示例中涵盖了您的用例：

在计算边界矩形时会考虑视口区域（或任何其他可滚动元素）的滚动量。这意味着每次滚动位置更改时，矩形的边界边缘（顶部、左侧、底部和右侧）都会更改它们的值（因为它们的值是相对于视口而不是绝对的）。 如果需要相对于文档左上角的边界矩形，只需将当前滚动位置添加到 top 和 left 属性（这些可以使用window.scrollX 和window.scrollY 获得）得到一个与当前滚动位置无关的边界矩形。