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

Question

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

Answer 1

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

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